Toolbar
The Toolbar component provides a canvas-style icon toolbar with support for orientations, active states, animated context switching, separators, fan-out sub-panels, and drag & drop onto surfaces.
Components
Section titled “Components”| Component | Description |
|---|---|
Toolbar | Container that groups toolbar buttons into a pill-shaped bar |
ToolbarButton | Button with optional icon and optional text, including hover tooltip |
ToolbarSeparator | Visual divider that separates groups of buttons |
ToolbarSection | Section within a toolbar that animates between named contexts |
ToolbarContext | Named context (set of buttons) inside a ToolbarSection |
ToolbarFanOutItem | Button that slides out a horizontal sub-panel on click |
ToolbarFolder | Button that reveals a dynamically sized grid of buttons on click |
ToolbarGroup | Formal logical sub-group of toolbar items with an automatic visual separator between adjacent groups |
ToolbarSlotProvider | Context provider that enables the slot system — wrap the application root or a feature boundary |
ToolbarSlot | Renders nothing itself; injects its children into the named slot at the given order position |