Button group

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

Example 1: Default button group and button group using contextual variants

<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.

Example 2: Default, Small, and Large button groups

<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.

Example 3: Vertical button group

<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.

Example 4: button group with dropdown menus

<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 -->

See also

Also check out the <b-button-toolbar> component for generating toolbars containing button groups and input groups.

Component reference

<b-button-group>

Functional Component

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

PropertyTypeDefaultDescription
vertical BooleanfalseWhen set, rendered the button group in vertical mode
size StringSet 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
aria-role String'group'Sets the ARIA attribute 'role' to a specific value

Importing individual components

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

ComponentNamed ExportImport Path
<b-button-group>BButtonGroupbootstrap-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 ExportImport Path
ButtonGroupPluginbootstrap-vue

Example:

import { ButtonGroupPlugin } from 'bootstrap-vue'
Vue.use(ButtonGroupPlugin)