Toolbar
Action bars for grouping tools, controls, and contextual actions.
01 Examples
Rich Text Editor
Click the buttons above to toggle formatting. The text alignment and style update live.
Vertical Tools Palette
Active tool: select
Media Controls
02 Customization
Developer Toolbar
Floating Glass Toolbar
Pill Toolbar
03 Accessibility
Built-in ARIA
Renders with role="toolbar". aria-label is required to identify the toolbar's
purpose. aria-orientation is set automatically from
the orientation prop.
Keyboard
Tab moves focus into and out of the toolbar. Individual items inside the toolbar follow their own keyboard semantics (e.g. Buttons activate via Enter / Space).
Best Practices
Use descriptive aria-label values that communicate
the toolbar's function (e.g. "Text formatting", "File actions"). Group related controls
using Separator for visual clarity. Avoid nesting toolbars
inside each other.
04 API Reference
No matching properties |