Toolbar
A row of controls that acts as one tab stop, wrapping the Base UI Toolbar: Tab lands once, arrow keys move along the row. The controls themselves are regular Bones parts (Buttons, Toggles) attached via render.
Playground
Every control maps to a prop. Tab into the toolbar and use the arrow keys; the Code tab always shows the markup for exactly what you've configured.
Variants
Horizontal by default; orientation="vertical" stacks the same children, turns the separators sideways, and swaps the arrow keys to up and down.
States
Disable one control with disabled on its ToolbarButton, or everything at once on the root; both surface as data-disabled. Focus is live: Tab lands on one control and the ring draws on the real Button or Toggle, not on a wrapper.
Styling states
The root carries data-orientation and data-disabled. ToolbarSeparator renders both .ub-separator (the hairline) and .ub-toolbar-separator (the toolbar spacing), so restyling the Separator component restyles toolbar dividers too; target the toolbar class when you only want these:
.ub-toolbar[data-orientation="vertical"] {
gap: 0.5rem;
}
.ub-toolbar-separator[data-orientation="vertical"] {
margin-inline: 0.5rem;
}Props
Six parts, all thin: the toolbar wires roving focus and semantics, the rendered controls keep their own behavior. The essentials:
| Prop | Type | Default | Description |
|---|---|---|---|
ToolbarRoot.aria-label | string | – | Names the toolbar for screen readers; always pass one. |
ToolbarRoot.orientation | "horizontal" | "vertical" | "horizontal" | Vertical stacks the controls and swaps the arrow keys. |
ToolbarRoot.disabled | boolean | false | Switches off every control inside. |
ToolbarButton.render | ReactElement | – | The real control: a Bones Button, Toggle, or anything focusable. |
ToolbarButton.disabled | boolean | false | Switches off this one control; forwarded to the rendered element. |
Agent instructions
Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.
ToolbarRoot, ToolbarButton, ToolbarLink, ToolbarGroup, ToolbarSeparator, ToolbarInput, from @usebones/react.
- Structure: ToolbarRoot (always pass aria-label) wrapping ToolbarButtons; group related ones with ToolbarGroup, divide with ToolbarSeparator.
- Attach real controls via render: ToolbarButton render={<Toggle iconOnly aria-label="..." />} or render={<Button variant="ghost" ... />}; ToolbarInput render={<Input ... />}. The control keeps its own styling and state.
- One tab stop; arrow keys move between controls (swapped by orientation "vertical"). disabled on the root switches off everything; disabled on a ToolbarButton switches off one.
- ToolbarGroup lays out in a row regardless of orientation; in a vertical toolbar put controls straight in the root.
- Restyle in CSS via .ub-toolbar, [data-orientation], [data-disabled]; the separator renders the Separator component's class (.ub-separator) plus .ub-toolbar-separator spacing, so restyling one restyles both. Tokens only.