Toolbar vs CommandBar
Toolbar is a compact role="toolbar" strip for editor chrome, preview bars, and nested controls (embedded Select, panelless Tabs, icon buttons). Use CommandBar for list-page search + filter rows. Slots start, center, and end map to a three-column layout; pass children for a custom inner cluster (see nested controls).
Document title + actions
Docs preview bar (AppearanceControls)
Same shell tokens as Toolbar — theme select and icon-only light/dark tabs with a divider. Used on every component doc preview header.
Center slot — view switcher
Filter chips + icon actions
Nested controls (children slot)
Compose embedded Select, a hairline divider, and panelless Tabs inside one shell — same helpers as AppearanceControls.
Stacked toolbars (editor chrome)
Canvas content sits below the toolbar stack — borders and surface tokens stay on-theme while the chrome stays compact.
Freeform children
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| start / center / end | Optional | ReactNode | — | Three-column layout slots. |
| ariaLabel | Optional | string | Toolbar | Accessible toolbar name. |