Actions
Toolbar
Groups actions and controls with one Tab stop and arrow-key navigation.
Usage
Anatomy
The parts and how they nest, taken from the preview above.
Examples
Vertical tools
Keep drawing tools next to their canvas. Arrow Up and Arrow Down move between tools.
A calmer workspace
Disabled and loading actions
Keep unavailable actions discoverable and prevent repeated clicks while saving.
Toggle groups and tooltips
Compose named formatting controls, action buttons, and links in one keyboard sequence.
Vertical groups
Groups inherit the toolbar direction. Separators rotate with the layout.
With input
Edit text inside the toolbar without arrow navigation interrupting the caret.
Recommendations
| Guidance | Practice |
|---|---|
| Do | Group commands by purpose and label icon-only controls. Keep keyboard order aligned with visual order. |
| Do | Name the toolbar and use its arrow-key navigation to move between controls. |
Usage boundaries
| Guidance | Boundary |
|---|---|
| Scope | Use Button Group when independent Tab stops are preferable. The toolbar does not execute application commands. |
API reference
Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.
| Prop | Type | Default | Description |
|---|---|---|---|
| | "horizontal" | Controls layout and the arrow keys used for navigation. |
| | true | Wraps focus at either end of the toolbar. |
| | false | Disables toolbar buttons and input editing. Links retain their native navigation behavior. |
| | variant="ghost" | Reuses Button appearance by default. A supplied render element owns appearance and participates in toolbar focus. |
| | true | Keeps disabled actions discoverable through arrow navigation, following Base UI. Set false to skip a disabled item. |
| | — | Group related actions, separate groups, and include keyboard-accessible links. |
| | — | Uses Mizen Input appearance and Base UI editing-aware toolbar navigation. Native input props and refs remain supported. |