# Button toolbar
> 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
```html
«
‹
Edit
Undo
Redo
›
»
```
**Example 2:** with mixture of small button group and small input group
```html
Save
Cancel
```
**Example 3:** with button groups and dropdown menu
```html
New
Edit
Undo
Item 1
Item 2
Item 3
Save
Cancel
```
## 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
``, ``, and `` 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`.
## Keyboard navigation
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.
## See also
- [``](/docs/components/button-group)
- [``](/docs/components/dropdown)