Toolbar
A horizontal container for toolbar items — buttons, separators, spacers, and groups — with full accessibility.
When to Use
- Group related actions (bold, italic, underline) in a text editor or data grid.
- Provide contextual actions at the top of a panel or card.
- Build app-level toolbars with spatially separated groups of controls.
API Reference
Toolbar
| Property | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The toolbar items (buttons, separators, spacers, groups, inputs). |
| Overflow | bool | false | When true, enables overflow mode. Use VisibleCount to specify how many items stay inline. |
| VisibleCount | int | -1 | Number of leading items to show inline (Overflow=true). -1 shows all items. |
| OverflowLabel | string? | null | aria-label for the "⋯" overflow button. Defaults to "More". |
| Class | string? | null | Additional CSS classes appended to the toolbar container. |
ToolbarSeparator
| Property | Type | Default | Description |
|---|---|---|---|
| Class | string? | null | A 1px vertical dividing rule between toolbar sections. |
ToolbarSpacer
A flex-1 spacer that pushes subsequent toolbar items to the far right. No additional props.
ToolbarGroup
Groups children with a tighter gap. Accepts ChildContent and Class. No additional props.
Related Components
- AppBar — Full-width top application bar with start/center/end zones.
- Button — The primary action component used within toolbars.
- ToggleGroup — Use when toolbar buttons represent exclusive choices (alignment, etc.).