Toolbar
A horizontal container for grouping search, actions, and controls above content areas like tables or lists.
Default
With Dropdown & Icon Buttons
Usage
Place the Toolbar directly above the content it controls (table, list, grid). Search goes on the left, actions on the right.
Use ToolbarSpacer to push right-side actions to the end. Use ToolbarSeparator for visual grouping.
Keep toolbar actions relevant to the content — avoid putting global navigation here.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| Toolbar | div | — | Root flex container with padding and border-bottom |
| ToolbarSection | div | — | Groups related controls with consistent gap |
| ToolbarSpacer | div | — | Flexible spacer that pushes items apart |
| ToolbarSeparator | div | — | Vertical divider between groups |