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;
Full keyboard navigation.
Install the component from your command line.
npm install @radix-ui/react-toolbar
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>
);
Contains all the toolbar component parts.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
orientation | enum | "horizontal" |
dir | enum | |
loop | boolean | true |
Data attribute | Values |
---|---|
[data-orientation] | "vertical" | "horizontal" |
A button item.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
Data attribute | Values |
---|---|
[data-orientation] | "vertical" | "horizontal" |
A link item.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
A set of two-state buttons that can be toggled on or off.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
type* | enum | |
value | string | |
defaultValue | string | |
onValueChange | function | |
value | string[] | [] |
defaultValue | string[] | [] |
onValueChange | function | |
disabled | boolean | false |
Data attribute | Values |
---|---|
[data-orientation] | "vertical" | "horizontal" |
An item in the group.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
value* | string | |
disabled | boolean |
Data attribute | Values |
---|---|
[data-state] | "on" | "off" |
[data-disabled] | Present when disabled |
[data-orientation] | "vertical" | "horizontal" |
Used to visually separate items in the toolbar.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
Data attribute | Values |
---|---|
[data-orientation] | "vertical" | "horizontal" |
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>
);
Uses roving tabindex to manage focus movement among items.
Key | Description |
---|---|
Tab | Moves focus to the first item in the group. |
Space | Activates/deactivates the item. |
Enter | Activates/deactivates the item. |
ArrowDown | Moves focus to the next item depending on orientation . |
ArrowRight | Moves focus to the next item depending on orientation . |
ArrowUp | Moves focus to the previous item depending on orientation . |
ArrowLeft | Moves focus to the previous item depending on orientation . |
Home | Moves focus to the first item. |
End | Moves focus to the last item. |