UI Component LabAction
Toolbar
A row of related controls, such as text formatting buttons, grouped together.
Demo
The quick brown fox jumps over the lazy dog.
Also known as
- Toolbar — React Aria
- <toolbar> (proposal) — Open UI
How to recognize it
A strip of small icon buttons, sometimes with dividers between groups. Pressed buttons stay highlighted.
Behavior
- The whole toolbar is a single Tab stop. Inside it, the arrow keys move between buttons.
- When the user tabs back in, focus returns to the last focused button (roving tabindex).
- This demo’s buttons are toggle buttons that use aria-pressed.
Keyboard
| Key | Action |
|---|---|
| Tab | Moves focus into or out of the toolbar. |
| ← / → | Moves to the previous or next button (wraps around). |
| Home / End | Moves to the first or last button. |
| Enter / Space | Presses the focused button. |
Usage notes
- Group controls as a toolbar only when there are three or more of them.
- Give the toolbar a label with aria-label so its purpose is announced.
Similar components
- Menu: A toolbar keeps a group of controls visible in a row; a menu hides actions in a list that opens on demand.
- Toggle button: A toggle button is one on/off button; a toolbar groups several buttons and moves between them with arrow keys.
Sources
- WAI-ARIA APG: Toolbar Pattern (Last checked: )
- Open UI: Toolbar Element (Explainer) (Last checked: )