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