Toolbar

Group related controls into one keyboard navigation region.

Preview

Design guidance

Give the toolbar an accessible name. Use Toolbar.Button, Link and Input so Base UI can manage roving focus. In a horizontal toolbar, put a single text input last: arrow keys also move its text cursor. Text buttons should compose a normal Button with render.

The default surface is ghost. Font size uses the existing Combobox without a visible label. Choose a preset or enter a custom integer from 8 to 72px. Enter or blur commits the value; values outside the range are clamped. These limits belong to this example.

Installation

Install

npx shadcn@latest add https://ghost-ui.com/r/toolbar.json

Basic usage

123456import { Toolbar } from "@/components/ui/toolbar";
import { Button } from "@/components/ui/button";

<Toolbar.Root aria-label="Document actions">
  <Toolbar.Button render={<Button variant="ghost" />}>Rewrite</Toolbar.Button>
</Toolbar.Root>

Structures

Examples

Outline

Add a boundary around the toolbar with variant="outline".

Mixed controls

Combine a Select for Paragraph, H1, H2 and H3, a Bold toggle, and a Reset action. Reset restores Paragraph and clears Bold.

Vertical tools

Combine document commands with a persistent grid toggle. Zoom and Rotate change the document view. The separator turns with the toolbar.

Disabled group

Disable related formatting controls while keeping other actions available.

API reference

Toolbar properties
Prop	Type	Default	Description
`Root.variant`	`"ghost" \| "outline"`	`"ghost"`	Transparent toolbar or an optional outline around the controls.
`Root.orientation / loopFocus`	`"horizontal" \| "vertical" / boolean`	`"horizontal" / true`	Sets navigation direction and wrapping focus.
`Root.disabled / Group.disabled`	`boolean`	`false`	Disables all controls in the relevant region.
`Button.render`	`ReactElement \| render function`	`square ghost Button`	Compose a normal Button for text, a Toggle for persistent choices, or a Select.Trigger.
`Input.render`	`ReactElement \| render function`	`Input`	Keeps text input behavior inside toolbar navigation.
`Link.render`	`ReactElement \| render function`	`canonical Link`	Use an actual href for navigation.
`Separator.orientation`	`"horizontal" \| "vertical"`	`perpendicular to Root`	Explicit orientation overrides the automatic direction.
`ref / className / style`	`Base UI part props`	`—`	Refs, state callbacks and render composition are forwarded.

Behavior and advanced props follow Base UI Toolbar.