Radix homepage
Components

Toolbar

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

import React from 'react';
import * as Toolbar from '@radix-ui/react-toolbar';
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.

Install the component from your command line.

npm install @radix-ui/react-toolbar

Import the component.

import * as Toolbar from '@radix-ui/react-toolbar';
export default () => (
<Toolbar.Root>
<Toolbar.Button />
<Toolbar.Separator />
<Toolbar.Link />
<Toolbar.ToggleGroup>
<Toolbar.ToggleItem />
</Toolbar.ToggleGroup>
</Toolbar.Root>
);

Contains all the toolbar component parts.

PropTypeDefault
asChildbooleanfalse
orientationenum"horizontal"
direnumNo default value
loopbooleantrue
Data AttributeValues
[data-orientation]"vertical" | "horizontal"

A button item.

PropTypeDefault
asChildbooleanfalse
Data AttributeValues
[data-orientation]"vertical" | "horizontal"

A link item.

PropTypeDefault
asChildbooleanfalse

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

PropTypeDefault
asChildbooleanfalse
type*enumNo default value
valuestringNo default value
defaultValuestringNo default value
onValueChangefunctionNo default value
valuestring[][]
defaultValuestring[][]
onValueChangefunctionNo default value
disabledbooleanfalse
Data AttributeValues
[data-orientation]"vertical" | "horizontal"

An item in the group.

PropTypeDefault
asChildbooleanfalse
value*stringNo default value
disabledbooleanNo default value
Data AttributeValues
[data-state]"on" | "off"
[data-disabled]Present when disabled
[data-orientation]"vertical" | "horizontal"

Used to visually separate items in the toolbar.

PropTypeDefault
asChildbooleanfalse
Data AttributeValues
[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 * as Toolbar from '@radix-ui/react-toolbar';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
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.

KeyDescription
TabMoves focus to the first item in the group.
SpaceActivates/deactivates the item.
EnterActivates/deactivates the item.
ArrowDownMoves focus to the next item depending on orientation.
ArrowRightMoves focus to the next item depending on orientation.
ArrowUpMoves focus to the previous item depending on orientation.
ArrowLeftMoves focus to the previous item depending on orientation.
HomeMoves focus to the first item.
EndMoves focus to the last item.