Toolbar

Grouped controls container.

Usage

Give Root an aria-label — "Formatting", "Actions" — and give icon-only controls their own. A toolbar announced with no name tells the user nothing about what it controls.

Why not just buttons

Because of the keyboard. Bits gives the toolbar role="toolbar" and roving focus: the whole thing is one tab stop and the arrow keys move between controls.

A twelve-button toolbar built from plain buttons costs a keyboard user twelve presses of Tab to get past. The same toolbar built with this costs one. That is the entire reason the role exists, and it is invisible if you only ever test with a mouse.

Picking the right part

The parts are not interchangeable — each carries different semantics:

Button — performs an action.
Link — navigates. It stays a real anchor, so middle-click, open-in-new-tab and the link role keep working. A button that navigates takes all of that away from the user.
Group — a toggle group. type is required and sets the shape of value, exactly as on Toggle Group.
GroupItem — one toggle inside a Group.

Props

Toolbar.Root — plus orientation and loop forwarded to Bits.

Prop	Type	Default
`class` Extra classes merged onto the toolbar.	`string`	—
`orientation` Axis the arrow keys navigate along.	`'horizontal' \| 'vertical'`	`'horizontal'`
`loop` Focus wraps from the last control back to the first.	`boolean`	`true`

Toolbar.Group — value is bindable.

Prop	Type	Default
`value` Active item(s). Bindable. `type="single"` gives a string, `type="multiple"` gives a string[] — the shape follows `type`.	`string \| string[]`	—
`class` Extra classes merged onto the group.	`string`	—
`type` required Required. Sets the shape of value: single gives a string, multiple a string[].	`'single' \| 'multiple'`	—
`onValueChange` Called when the active item(s) change.	`(value: string & string[]) => void`	—
`disabled` Disables every item in the group.	`boolean`	`false`

Button, Link and GroupItem each take class plus their native attributes.