Button Toolbar | Components

Group a series of button-groups and/or input-groups together on a single line, with optional keyboard navigation

Example 1: with button groups & Keyboard navigation

<div>
  <b-button-toolbar key-nav aria-label="Toolbar with button groups">
    <b-button-group class="mx-1">
      <b-button>&laquo;</b-button>
      <b-button>&lsaquo;</b-button>
    </b-button-group>
    <b-button-group class="mx-1">
      <b-button>Edit</b-button>
      <b-button>Undo</b-button>
      <b-button>Redo</b-button>
    </b-button-group>
    <b-button-group class="mx-1">
      <b-button>&rsaquo;</b-button>
      <b-button>&raquo;</b-button>
    </b-button-group>
  </b-button-toolbar>
</div>

<!-- b-button-toolbar.vue -->

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

<div>
  <b-button-toolbar aria-label="Toolbar with button groups and input groups">
    <b-button-group size="sm" class="mr-1">
      <b-button>Save</b-button>
      <b-button>Cancel</b-button>
    </b-button-group>
    <b-input-group size="sm" prepend="$" append=".00">
      <b-form-input value="100" class="text-right"></b-form-input>
    </b-input-group>
  </b-button-toolbar>
</div>

<!-- b-button-toolbar-input.vue -->

Example 3: with button groups and dropdown menu

<div>
  <b-button-toolbar aria-label="Toolbar with button groups and dropdown menu">
    <b-button-group class="mx-1">
      <b-button>New</b-button>
      <b-button>Edit</b-button>
      <b-button>Undo</b-button>
    </b-button-group>
    <b-dropdown class="mx-1" right text="menu">
      <b-dropdown-item>Item 1</b-dropdown-item>
      <b-dropdown-item>Item 2</b-dropdown-item>
      <b-dropdown-item>Item 3</b-dropdown-item>
    </b-dropdown>
    <b-button-group class="mx-1">
      <b-button>Save</b-button>
      <b-button>Cancel</b-button>
    </b-button-group>
  </b-button-toolbar>
</div>

<!-- b-button-toolbar-dropdown.vue -->

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 <b-button-group>, <b-input-group>, and <b-dropdown> components.

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.

Enable optional keyboard navigation by setting the prop key-nav.

Keypress	Action
`Left` or `Up`	Move to the previous non-disabled item in the toolbar
`Right` or `Down`	Move to the next non-disabled item in the toolbar
`Shift`+`Left` or `Shift`+`Up`	Move to the first non-disabled item in the toolbar
`Shift`+`Right` or `Shift`+`Down`	Move to the last non-disabled item in the toolbar
`Tab`	Move to the next control on the page
`Shift`+`Tab`	Move to the previous control on the page

Caution: If you have text or text-like inputs in your toolbar, leave keyboard navigation off, as it is not possible to use key presses to jump out of a text (or test-like) inputs.

Component reference

View source

<b-button-toolbar> Component aliases
<b-button-toolbar> Properties
<b-button-toolbar> Slots

<b-button-toolbar> can also be used via the following aliases:

<b-btn-toolbar>

Note: component aliases are only available when importing all of BootstrapVue or using the component group plugin.

All property default values are globally configurable.

Property	Type	Default	Description
`justify`	`Boolean`	`false`	Make the toolbar span the maximum available width, by increasing spacing between the button groups, input groups and dropdowns
`key-nav`	`Boolean`	`false`	When set, enabled keyboard navigation mode for the toolbar. Do not set this prop when the toolbar has inputs

Name	Description
`default`	Content to place in the button toolbar

Importing individual components

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

Component	Named Export	Import Path
`<b-button-toolbar>`	`BButtonToolbar`	`bootstrap-vue`

Example:

import { BButtonToolbar } from 'bootstrap-vue'
Vue.component('b-button-toolbar', BButtonToolbar)

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
`ButtonToolbarPlugin`	`bootstrap-vue`

Example:

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

Usage

Sizing

Justify

Keyboard navigation

See also

Component reference

Component aliases

Properties

Slots

Importing individual components

Importing as a Vue.js plugin