React Aria
DocsReleasesBlog
React Aria

Toolbar

A toolbar is a container for a set of interactive controls, such as buttons, dropdown menus, or checkboxes, with arrow key navigation.

Theme 
orientation 
Example
Toolbar.tsx
Toolbar.css
import {Toolbar} from './Toolbar';
import {ToggleButtonGroup} from './ToggleButtonGroup';
import {ToggleButton} from './ToggleButton';
import {Button} from './Button';
import {Select, SelectItem} from './Select';
import {Separator} from './Separator';
import {Group} from 'react-aria-components';
import {Bold, Italic, Underline, ClipboardCopy, Scissors, ClipboardPaste} from 'lucide-react';

<Toolbar aria-label="Text formatting">
  <ToggleButtonGroup aria-label="Style">
    <ToggleButton id="bold" aria-label="Bold">
      <Bold size={16} />
    </ToggleButton>
    <ToggleButton id="italic" aria-label="Italic">
      <Italic size={16} />
    </ToggleButton>
    <ToggleButton id="underline" aria-label="Underline">
      <Underline size={16} />
    </ToggleButton>
  </ToggleButtonGroup>
  <Separator />
  <Group aria-label="Clipboard">
    <Button aria-label="Copy">
      <ClipboardCopy size={16} />
    </Button>
    <Button aria-label="Cut">
      <Scissors size={16} />
    </Button>
    <Button aria-label="Paste">
      <ClipboardPaste size={16} />
    </Button>
  </Group>
  <Separator />
  <Select aria-label="Font" defaultSelectedKey="helvetica">
    <SelectItem id="helvetica">Helvetica</SelectItem>
    <SelectItem id="times">Times</SelectItem>
    <SelectItem id="comic-sans">Comic Sans</SelectItem>
  </Select>
</Toolbar>

API

ToolbarGroupCutCutCutCutCutPasteCopyButtonCutCutCutCutGroupSeparator 
<Toolbar>
  <Button />
  <ToggleButtonGroup>
    <ToggleButton />
  </ToggleButtonGroup>
  <Separator />
  <Group>
    <Button />
  </Group>
  <Select />
</Toolbar>

Toolbar

NameTypeDefault
orientationDefault: 'horizontal'
The orientation of the entire toolbar.
children<>Default: —
The children of the component. A function may be provided to alter the children based on component state.

Default className: react-aria-Toolbar

Render PropCSS Selector
orientationCSS Selector: [data-orientation]
The current orientation of the toolbar.

Related pages