Control-row alignment
Put the caption on CommandBar label — not SearchInput label — so chips, embedded Select, and buttons share one control row (all h-9) aligned to the search field. Omit search when the bar is filters/actions only (e.g. label="Period"). Toolbar icons use react-icons via @/docs-ui/chrome-doc-icons (Feather / Heroicons).
Search with visible label + action
Search
Search without label (placeholder only)
Multiple text buttons
Icon-only actions
Filter list
Mixed: one button + icon buttons
Search + filter chips
Use Chip density="toolbar" so filter chips match Button size="sm" height in the row.
Search
AllActiveArchived
Search + embedded selects (filters slot)
Full row (label, chips, selects, buttons, icons)
Search projects
ProductionStaging
Search only
Search
Actions only (no search)
Period
Last 7 days
Icon-only bar (no search field)
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| label | Optional | ReactNode | — | Label row above controls — with search (placeholder-only) or filters/actions only. |
| search | Optional | ReactNode | — | SearchInput (placeholder / aria-label). |
| filters | Optional | ReactNode | — | Chip (density=toolbar for h-9 row), embedded Select, or custom controls. |
| actions | Optional | ReactNode | — | Trailing Button and/or IconButton group. |
| ariaLabel | Optional | string | Filters | role=search landmark label. |
| children | Optional | ReactNode | — | Freeform content when slots are omitted. |