Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA frosted macOS-style toolbar with a title block, icon and labeled buttons, segmented view switches, an expanding search field, separators and spacers, built on Radix Toolbar.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Accessible name of the toolbar. |
title | ReactNode | - | Large title at the leading edge. |
subtitle | ReactNode | - | Smaller line under the title, such as an item count. |
Also accepts all Radix Toolbar.Root props.
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | - | Icon. |
labeled | boolean | false | Show the text label under the icon, like a classic macOS toolbar. |
pressed | boolean | - | Shown as a pressed (toggled on) button. |
Icon-only buttons need an aria-label, which is also used as the tooltip.
Radix Toolbar.ToggleGroup and Toolbar.ToggleItem. Pass type="single" with value and onValueChange for a view switch.
| Prop | Type | Default | Description |
|---|---|---|---|
collapsedWidth | string | "9rem" | Width when collapsed, as a CSS length. |
expandedWidth | string | "15rem" | Width when focused. |
onClear | () => void | - | Shows a clear button when set and the field has text. |
Also accepts all <input> props.
ToolbarGroup, ToolbarSeparator and ToolbarSpacer take no extra props; the spacer pushes everything after it to the trailing edge.