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

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

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
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
vertical
BooleanfalseWhen 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>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 Export
Import Path
ButtonGroupPluginbootstrap-vue

Example:

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