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

Prop	Type	Default
`class` Extra classes merged onto the toolbar.	`string`	—
`child` bits-ui	`Snippet<[{ props: Record<string, unknown>; }]> \| undefined`	—
`children` bits-ui	`Snippet<[]> \| undefined`	—
`id` bits-ui	`string \| undefined`	—
`loop` bits-ui Whether or not to loop through the toolbar items when navigating with the keyboard.	`boolean \| undefined`	`true`
`orientation` bits-ui The orientation of the toolbar. This determines how keyboard navigation will work within the toolbar.	`Orientation \| undefined`	`"horizontal"`
`ref` bits-ui	`HTMLElement \| null \| undefined`	—

Toolbar.Group

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`	—
`child` bits-ui	`Snippet<[{ props: Record<string, unknown>; }]> \| undefined`	—
`children` bits-ui	`Snippet<[]> \| undefined`	—
`disabled` bits-ui Whether the toggle group is disabled or not.	`boolean \| undefined`	`false`
`id` bits-ui	`string \| undefined`	—
`onValueChange` bits-ui	`OnChangeFn<string> \| OnChangeFn<string[]> \| undefined`	—
`ref` bits-ui	`HTMLElement \| null \| undefined`	—
`type` required bits-ui	`"multiple" \| "single"`	—

Toolbar.Button

Prop	Type	Default
`class` Extra classes merged onto the button.	`string`	—
`child` bits-ui	`Snippet<[{ props: Record<string, unknown>; }]> \| undefined`	—
`children` bits-ui	`Snippet<[]> \| undefined`	—
`disabled` bits-ui Whether the button is disabled or not.	`boolean \| null \| undefined`	—
`id` bits-ui	`string \| undefined`	—
`ref` bits-ui	`HTMLElement \| null \| undefined`	—

Toolbar.Link

Prop	Type	Default
`class` Extra classes merged onto the link.	`string`	—
`child` bits-ui	`Snippet<[{ props: Record<string, unknown>; }]> \| undefined`	—
`children` bits-ui	`Snippet<[]> \| undefined`	—
`id` bits-ui	`string \| undefined`	—
`ref` bits-ui	`HTMLElement \| null \| undefined`	—

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

Toolbar.Group — value is bindable.

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