Toolbar

Actions

A compact bar of grouped, frequently used actions.

A toolbar groups formatting and editing actions into a bordered bar. It uses the Base UI Toolbar primitive, so focus moves with arrow keys and stays within the bar.

npx shadcn@latest add toolbar

Basic

Icon buttons, separators, and a toggle group inside one bar.

Preview

Live

tsx

1<Toolbar aria-label="Formatting toolbar">
2  <ToolbarButton aria-label="Undo">
3    <Undo2 />
4  </ToolbarButton>
5  <ToolbarButton aria-label="Redo">
6    <Redo2 />
7  </ToolbarButton>
8  <ToolbarSeparator />
9  <ToolbarToggleGroup defaultValue={["bold"]} aria-label="Text style">
10    <ToggleGroupItem value="bold" aria-label="Bold">
11      <Bold />
12    </ToggleGroupItem>
13    <ToggleGroupItem value="italic" aria-label="Italic">
14      <Italic />
15    </ToggleGroupItem>
16    <ToggleGroupItem value="underline" aria-label="Underline">
17      <Underline />
18    </ToggleGroupItem>
19  </ToolbarToggleGroup>
20  <ToolbarSeparator />
21  <ToolbarButton aria-label="Search">
22    <Search />
23  </ToolbarButton>
24</Toolbar>

Alignment

Toggle groups inside the toolbar stay exclusive by default.

Preview

Live

tsx

1<Toolbar aria-label="Editor toolbar">
2  <ToolbarButton aria-label="Highlight">
3    <Highlighter />
4  </ToolbarButton>
5  <ToolbarButton aria-label="Strikethrough">
6    <Strikethrough />
7  </ToolbarButton>
8  <ToolbarSeparator />
9  <ToolbarToggleGroup defaultValue={["left"]} aria-label="Alignment">
10    <ToggleGroupItem value="left" aria-label="Align left">
11      <AlignLeft />
12    </ToggleGroupItem>
13    <ToggleGroupItem value="center" aria-label="Align center">
14      <AlignCenter />
15    </ToggleGroupItem>
16    <ToggleGroupItem value="right" aria-label="Align right">
17      <AlignRight />
18    </ToggleGroupItem>
19  </ToolbarToggleGroup>
20  <ToolbarSeparator />
21  <ToolbarButton aria-label="Save">
22    <Save />
23  </ToolbarButton>
24</Toolbar>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
orientation	"horizontal" \| "vertical"= "horizontal"	The orientation of the toolbar.
variant	ButtonProps["variant"]= "ghost"	Variant passed through to ToolbarButton.
size	ButtonProps["size"]= "icon-sm"	Size passed through to ToolbarButton.
value	readonly string[]	Controlled pressed values for ToolbarToggleGroup.
multiple	boolean= false	Allow several toggles pressed at once in a ToolbarToggleGroup.