On this page
Overview
Show code, FormattingToolbar.tsx
Variants
Orientation
- Horizontal
Most toolbars. The default.
- Vertical
A palette, such as drawing tools.
A vertical toolbar of toggles, where one tool stays chosen.
Show code, DrawingTools.tsx
Over content
A toolbar can float over dense content, such as a diagram, on a fully rounded surface with small buttons.
Where people scan its icons by pointing at them, its buttons can show their names at once, with no wait.
Show code, ViewControls.tsx
Anatomy
Toolbar
Group
Button
Separator
Show code, ToolbarAnatomy.tsx
Behaviour
Names and toggles
Each button is an icon, whose name and shortcut show in a tooltip.
A button can also be a toggle that stays pressed.
Buttons of your own
A button of the application's own, such as a menu's trigger, keeps its own tab stop, outside the arrow keys' path.
Rules
A toolbar holds icon commands for one subject, each named after its action.
Use it when
- Controls for one subject, such as an editor's formatting
- Many icon-only actions that would each take a tab stop
- A palette whose chosen tool stays chosen, such as drawing tools
Show code, SameIconPressed.tsx
Show code, IconSwapsPressed.tsx
Other ways in
Offer the important actions in a menu or a shortcut too.
Labels
Name each button after its action, and the toolbar after its subject.
- A button: Bold, rather than its icon.
- A toolbar: Formatting.
Other bars
Not every bar of controls is a Toolbar. A bar with a field, a Select or labelled actions is a Row, where every control keeps its tab stop and fields keep their arrow keys.
| Bar | Build it with |
|---|---|
| Icon commands, such as formatting or tools | A Toolbar of its buttons |
| A page's search, filters and primary action | A Row in the toolbar of a PageHeader |
| A section's heading with its actions | A Row that wraps, with the actions at the end |
| A table's search and actions | A Row above the table, in the size of its rows |
| Actions in a window's title bar | A TopBar as a title bar, with small ghost buttons |
A page's toolbar: a Row in PageHeader's toolbar, not a Toolbar.
Show code, PageToolbar.tsx
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves into the toolbar, to the control last used, and out. |
| ←, → | Moves between controls of a horizontal toolbar. |
| ↑, ↓ | Moves between controls of a vertical toolbar. |
| Enter, Space | Presses the button, or follows the link. |
| Esc | Closes the tooltip. |