Button Group ​

Group a series of buttons together on a single line or stack them in a vertical column with BButtonGroup.

Overview ​

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

HTML
template
<div>
  <BButtonGroup aria-label="Basic example">
    <BButton>Button 1</BButton>
    <BButton>Button 2</BButton>
    <BButton>Button 3</BButton>
  </BButtonGroup>
</div>
<div class="mt-3">
  <BButtonGroup>
    <BButton variant="success">Success</BButton>
    <BButton variant="info">Info</BButton>
    <BButton variant="warning">Warning</BButton>
  </BButtonGroup>
</div>

Note: In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate role attribute needs to be provided. bootstrap-vue-next will put the role="group" and aria-role attributes on the groups. By default, aria-role is set to group, but you can override that with the aria-role property.

In addition, groups should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use aria-label, but alternatives such as aria-labelledby can also be used.

Sizing ​

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

HTML
template
<div>
  <BButtonGroup size="sm" aria-label="Large button group">
    <BButton variant="secondary">Left</BButton>
    <BButton variant="secondary">Middle</BButton>
    <BButton variant="secondary">Right</BButton>
  </BButtonGroup>
</div>
<div class="mt-3">
  <BButtonGroup size="md" aria-label="Small button group">
    <BButton variant="secondary">Left</BButton>
    <BButton variant="secondary">Middle</BButton>
    <BButton variant="secondary">Right</BButton>
  </BButtonGroup>
</div>
<div class="mt-3">
  <BButtonGroup size="lg" aria-label="Large button group">
    <BButton variant="secondary">Left</BButton>
    <BButton variant="secondary">Middle</BButton>
    <BButton variant="secondary">Right</BButton>
  </BButtonGroup>
</div>

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.

HTML
template
<BButtonGroup vertical>
  <BButton>Top</BButton>
  <BButton>Middle</BButton>
  <BButton>Bottom</BButton>
</BButtonGroup>

Add BDropdown menus directly inside your BButtonGroup. Note that split dropdown menus are not supported when prop vertical is set.

HTML
template
<BButtonGroup aria-label="Button group with dropdown">
  <BButton variant="secondary">Button</BButton>
  <BDropdown text="Dropdown" variant="secondary">
    <BDropdownItem>Action</BDropdownItem>
    <BDropdownItem>Another action</BDropdownItem>
    <BDropdownItem>Something else here</BDropdownItem>
    <BDropdownDivider />
    <BDropdownItem>Separated link</BDropdownItem>
  </BDropdown>
</BButtonGroup>

See also ​

Also check out the BButtonToolbar component for generating toolbars containing button groups and input groups.

Component Reference

<BButtonGroup>
View Source
Adding styles: .btn‑group
Properties
PropTypeDefaultDescription
aria-labelstringundefined Sets the value of `aria-label` attribute on the rendered element
sizeSize'md' Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'
tagstring'div' Specify the HTML tag to render instead of the default tag
verticalbooleanfalse When set, renders the button group in vertical mode
Slots
NameScopeDescription
defaultContent (buttons) to place in the button group