Button Group

Group a series of buttons together on a single line with <b-button-group>.

Overview

Button Groups are an easy way to group a series of buttons together.

<div>
  <div>
    <b-button-group>
      <b-button>Button 1</b-button>
      <b-button>Button 2</b-button>
      <b-button>Button 3</b-button>
    </b-button-group>
  </div>
  <div class="mt-3">
    <b-button-group>
      <b-button variant="success">Success</b-button>
      <b-button variant="info">Info</b-button>
      <b-button variant="warning">Warning</b-button>
    </b-button-group>
  </div>
</div>

<!-- b-button-group.vue -->

Sizing

Set the size prop to lg or sm to render larger or smaller, respectively, buttons. There is no need to specify the size on the individual buttons.

<div>
  <div>
    <b-button-group>
      <b-button>Button 1</b-button>
      <b-button>Button 2</b-button>
      <b-button>Button 3</b-button>
    </b-button-group>
  </div>
  <div class="mt-3">
    <b-button-group size="sm">
      <b-button>Left</b-button>
      <b-button>Middle</b-button>
      <b-button>Right</b-button>
    </b-button-group>
  </div>
  <div class="mt-3">
    <b-button-group size="lg">
      <b-button>Left</b-button>
      <b-button>Middle</b-button>
      <b-button>Right</b-button>
    </b-button-group>
  </div>
</div>

<!-- b-button-group-sizes.vue -->

Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally by setting the vertical prop. Split button dropdowns are not supported here.

<div>
  <b-button-group vertical>
    <b-button>Top</b-button>
    <b-button>Middle</b-button>
    <b-button>Bottom</b-button>
  </b-button-group>
</div>

<!-- b-button-group-vertical.vue -->

Add <b-dropdown> menus directly inside your <b-button-group>. Note that split dropdown menus are not supported when prop vertical is set.

<div>
  <b-button-group>
    <b-button>Button</b-button>
    <b-dropdown right text="Menu">
      <b-dropdown-item>Item 1</b-dropdown-item>
      <b-dropdown-item>Item 2</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item>Item 3</b-dropdown-item>
    </b-dropdown>
    <b-dropdown right split text="Split Menu">
      <b-dropdown-item>Item 1</b-dropdown-item>
      <b-dropdown-item>Item 2</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item>Item 3</b-dropdown-item>
    </b-dropdown>
  </b-button-group>
</div>

<!-- b-button-group-menu.vue -->

Component reference

`<b-button-group>`

Functional component

View source

<b-button-group> Component aliases
<b-button-group> Properties
<b-button-group> Slots

Component aliases

<b-button-group> can also be used via the following aliases:

<b-btn-group>

Note: component aliases are only available when importing all of BootstrapVue or using the component group plugin.

Properties

All property default values are globally configurable.

Property	Type	Default	Description
`aria-role`	`String`	`'group'`	Sets the ARIA attribute `role` to a specific value
`size`	`String`		Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'
`tag`	`String`	`'div'`	Specify the HTML tag to render instead of the default tag
`vertical`	`Boolean`	`false`	When set, rendered the button group in vertical mode

Slots

Name	Description
`default`	Content (buttons) to place in the button group

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export	Import Path
`<b-button-group>`	`BButtonGroup`	`bootstrap-vue`

Example:

import { BButtonGroup } from 'bootstrap-vue'
Vue.component('b-button-group', BButtonGroup)

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export	Import Path
`ButtonGroupPlugin`	`bootstrap-vue`