Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationCase studiesBlog
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.

Installation

Install the component from your command line.

npm install @radix-ui/react-toolbar

Anatomy

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>

);

API Reference

Root

Contains all the toolbar component parts.

PropTypeDefault
asChild
boolean
false
orientation
enum
"horizontal"
dir
enum
No default value
loop
boolean
true
Data attributeValues
[data-orientation]"vertical" | "horizontal"

Button

A button item.

PropTypeDefault
asChild
boolean
false
Data attributeValues
[data-orientation]"vertical" | "horizontal"

A link item.

PropTypeDefault
asChild
boolean
false

ToggleGroup

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

PropTypeDefault
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 attributeValues
[data-orientation]"vertical" | "horizontal"

ToggleItem

An item in the group.

PropTypeDefault
asChild
boolean
false
value*
string
No default value
disabled
boolean
No default value
Data attributeValues
[data-state]"on" | "off"
[data-disabled]

Present when disabled

[data-orientation]"vertical" | "horizontal"

Separator

Used to visually separate items in the toolbar.

PropTypeDefault
asChild
boolean
false
Data attributeValues
[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 * 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>

);

Accessibility

Uses roving tabindex to manage focus movement among items.

Keyboard Interactions

KeyDescription
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.
PreviousToggle Group
NextTooltip
Edit this page on GitHub.