Toolbar

A container for grouping a set of controls, such as buttons, toggle groups or dropdown menus.

import * as React from "react";
import { Toolbar } from "radix-ui";
import {
	StrikethroughIcon,
	TextAlignLeftIcon,
	TextAlignCenterIcon,
	TextAlignRightIcon,
	FontBoldIcon,
	FontItalicIcon,
} from "@radix-ui/react-icons";
import "./styles.css";
const ToolbarDemo = () => (
	<Toolbar.Root className="ToolbarRoot" aria-label="Formatting options">
<Toolbar.ToggleGroup type="multiple" aria-label="Text formatting">
<Toolbar.ToggleItem
				className="ToolbarToggleItem"
				value="bold"
				aria-label="Bold"
			>
<FontBoldIcon />
</Toolbar.ToggleItem>
<Toolbar.ToggleItem
				className="ToolbarToggleItem"
				value="italic"
				aria-label="Italic"
			>
<FontItalicIcon />
</Toolbar.ToggleItem>
<Toolbar.ToggleItem
				className="ToolbarToggleItem"
				value="strikethrough"
				aria-label="Strike through"
			>
<StrikethroughIcon />
</Toolbar.ToggleItem>
</Toolbar.ToggleGroup>
<Toolbar.Separator className="ToolbarSeparator" />
<Toolbar.ToggleGroup
			type="single"
			defaultValue="center"
			aria-label="Text alignment"
		>
<Toolbar.ToggleItem
				className="ToolbarToggleItem"
				value="left"
				aria-label="Left aligned"
			>
<TextAlignLeftIcon />
</Toolbar.ToggleItem>
<Toolbar.ToggleItem
				className="ToolbarToggleItem"
				value="center"
				aria-label="Center aligned"
			>
<TextAlignCenterIcon />
</Toolbar.ToggleItem>
<Toolbar.ToggleItem
				className="ToolbarToggleItem"
				value="right"
				aria-label="Right aligned"
			>
<TextAlignRightIcon />
</Toolbar.ToggleItem>
</Toolbar.ToggleGroup>
<Toolbar.Separator className="ToolbarSeparator" />
<Toolbar.Link
			className="ToolbarLink"
			href="#"
			target="_blank"
			style={{ marginRight: 10 }}
		>
			Edited 2 hours ago
</Toolbar.Link>
<Toolbar.Button className="ToolbarButton" style={{ marginLeft: "auto" }}>
			Share
</Toolbar.Button>
</Toolbar.Root>
);
export default ToolbarDemo;

Features

Full keyboard navigation.

Anatomy

Import the component.

import { Toolbar } from "radix-ui";
export default () => (
	<Toolbar.Root>
<Toolbar.Button />
<Toolbar.Separator />
<Toolbar.Link />
<Toolbar.ToggleGroup>
<Toolbar.ToggleItem />
</Toolbar.ToggleGroup>
</Toolbar.Root>
);

API Reference

Root

Contains all the toolbar component parts.

Prop	Type	Default
`asChild`	`boolean`	`false`
`orientation`	`enum`	`"horizontal"`
`dir`	`enum`	No default value
`loop`	`boolean`	`true`

Data attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

Button

A button item.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

Link

A link item.

Prop	Type	Default
`asChild`	`boolean`	`false`

ToggleGroup

A set of two-state buttons that can be toggled on or off.

Prop	Type	Default
`asChild`	`boolean`	`false`
`type*`	`enum`	No default value
`value`	`string`	No default value
`defaultValue`	`string`	No default value
`onValueChange`	`function`	No default value
`value`	`string[]`	`[]`
`defaultValue`	`string[]`	`[]`
`onValueChange`	`function`	No default value
`disabled`	`boolean`	`false`

Data attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

ToggleItem

An item in the group.

Prop	Type	Default
`asChild`	`boolean`	`false`
`value*`	`string`	No default value
`disabled`	`boolean`	No default value

Data attribute	Values
`[data-state]`	`"on" \| "off"`
`[data-disabled]`	Present when disabled
`[data-orientation]`	`"vertical" \| "horizontal"`

Separator

Used to visually separate items in the toolbar.

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-orientation]`	`"vertical" \| "horizontal"`

Examples

Use with other primitives

All our primitives which expose a Trigger part, such as Dialog, AlertDialog, Popover, DropdownMenu can be composed within a toolbar by using the asChild prop.

Here is an example using our DropdownMenu primitive.

import { Toolbar, DropdownMenu } from "radix-ui";
export default () => (
	<Toolbar.Root>
<Toolbar.Button>Action 1</Toolbar.Button>
<Toolbar.Separator />
<DropdownMenu.Root>
<Toolbar.Button asChild>
<DropdownMenu.Trigger>Trigger</DropdownMenu.Trigger>
</Toolbar.Button>
<DropdownMenu.Content>…</DropdownMenu.Content>
</DropdownMenu.Root>
</Toolbar.Root>
);

Accessibility

Uses roving tabindex to manage focus movement among items.

Keyboard Interactions

Key	Description
Moves focus to the first item in the group.
Activates/deactivates the item.
Activates/deactivates the item.
Moves focus to the next item depending on `orientation`.
Moves focus to the next item depending on `orientation`.
Moves focus to the previous item depending on `orientation`.
Moves focus to the previous item depending on `orientation`.
Moves focus to the first item.
Moves focus to the last item.

PreviousToggle Group

NextTooltip

Edit this page on GitHub.

URL: https://www.radix-ui.com/primitives/docs/components/toolbar

⇱ Toolbar – Radix Primitives

Overview

Guides

Components

Utilities