Button Toolbar ​

Group a series of button-groups and/or input-groups together on a single line.

Example 1: with button groups

HTML
template
<BButtonToolbar key-nav aria-label="Toolbar with button groups">
  <BButtonGroup class="mx-1">
    <BButton>&laquo;</BButton>
    <BButton>&lsaquo;</BButton>
  </BButtonGroup>
  <BButtonGroup class="mx-1">
    <BButton>Edit</BButton>
    <BButton>Undo</BButton>
    <BButton>Redo</BButton>
  </BButtonGroup>
  <BButtonGroup class="mx-1">
    <BButton>&rsaquo;</BButton>
    <BButton>&raquo;</BButton>
  </BButtonGroup>
</BButtonToolbar>

Example 2: with mixture of small button group and small input group.

HTML
template
<BButtonToolbar aria-label="Toolbar with button groups and input groups">
  <BButtonGroup size="sm" class="me-1">
    <BButton>Save</BButton>
    <BButton>Cancel</BButton>
  </BButtonGroup>
  <BInputGroup size="sm" prepend="$" append=".00">
    <BFormInput value="100" class="text-end" />
  </BInputGroup>
</BButtonToolbar>

Example 3: with button groups and dropdown menu.

HTML
template
<BButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
  <BButtonGroup class="mx-1">
    <BButton>New</BButton>
    <BButton>Edit</BButton>
    <BButton>Undo</BButton>
  </BButtonGroup>
  <BDropdown class="mx-1" placement="right" text="menu">
    <BDropdownItem>Item 1</BDropdownItem>
    <BDropdownItem>Item 2</BDropdownItem>
    <BDropdownItem>Item 3</BDropdownItem>
  </BDropdown>
  <BButtonGroup class="mx-1">
    <BButton>Save</BButton>
    <BButton>Cancel</BButton>
  </BButtonGroup>
</BButtonToolbar>

Usage ​

Feel free to mix input groups and dropdowns with button groups in your toolbars. Similar to the example above, you'll likely need some utility classes though to space things properly.

Sizing ​

Note, if you want smaller or larger buttons or controls, set the size prop directly on the BButtonGroup, BInputGroup, and BDropdown components.

HTML
template
<div>
  <BButtonToolbar aria-label="Toolbar with size sm">
    <BButtonGroup size="sm" class="mx-1">
      <BButton>New</BButton>
      <BButton>Edit</BButton>
      <BButton>Undo</BButton>
    </BButtonGroup>
  </BButtonToolbar>
</div>
<div class="mt-2">
  <BButtonToolbar aria-label="Toolbar with dropdown size sm">
    <BDropdown size="sm" class="mx-1" placement="right" text="menu">
      <BDropdownItem>Item 1</BDropdownItem>
      <BDropdownItem>Item 2</BDropdownItem>
      <BDropdownItem>Item 3</BDropdownItem>
    </BDropdown>
  </BButtonToolbar>
</div>
<div class="mt-2">
  <BButtonToolbar aria-label="Toolbar with size lg">
    <BButtonGroup size="lg" class="mx-1">
      <BButton>New</BButton>
      <BButton>Edit</BButton>
      <BButton>Undo</BButton>
    </BButtonGroup>
  </BButtonToolbar>
</div>
<div class="mt-2">
  <BButtonToolbar aria-label="Toolbar with dropdown size lg">
    <BDropdown size="lg" class="mx-1" placement="right" text="menu">
      <BDropdownItem>Item 1</BDropdownItem>
      <BDropdownItem>Item 2</BDropdownItem>
      <BDropdownItem>Item 3</BDropdownItem>
    </BDropdown>
  </BButtonToolbar>
</div>

Justify ​

Make the toolbar span the maximum available width, by increasing spacing between the button groups, input groups and dropdowns, by setting the prop justify.

HTML
template
<BButtonToolbar justify aria-label="Toolbar with justify">
  <BButtonGroup class="mx-1">
    <BButton>New</BButton>
    <BButton>Edit</BButton>
    <BButton>Undo</BButton>
  </BButtonGroup>
  <BDropdown class="mx-1" placement="right" text="menu">
    <BDropdownItem>Item 1</BDropdownItem>
    <BDropdownItem>Item 2</BDropdownItem>
    <BDropdownItem>Item 3</BDropdownItem>
  </BDropdown>
  <BButtonGroup class="mx-1">
    <BButton>Save</BButton>
    <BButton>Cancel</BButton>
  </BButtonGroup>
</BButtonToolbar>

Component Reference

<BButtonToolbar>
View Source
Adding styles: .btn‑toolbar
Properties
PropTypeDefaultDescription
aria-labelstringundefined Sets the value of `aria-label` attribute on the rendered element
justifybooleanfalse Make the toolbar span the maximum available width, by increasing spacing between the button groups, input groups and dropdowns
rolestringundefined Sets the ARIA attribute `role` to a specific value
Slots
NameScopeDescription
defaultContent to place in the button toolbar