Toolbar

A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.

Example#

import {Button, Checkbox, Menu, MenuItem, MenuTrigger, Popover, Separator, ToggleButton, Toolbar} from 'react-aria-components';

<Toolbar>
  <ToggleButton>
    <strong>B</strong>
  </ToggleButton>
  <ToggleButton>
    <div style={{ textDecoration: 'underline' }}>U</div>
  </ToggleButton>
  <ToggleButton>
    <i>I</i>
  </ToggleButton>
  <Separator orientation="vertical" />
  <Button>Copy</Button>
  <Button>Paste</Button>
  <Button>Cut</Button>
  <Separator orientation="vertical" />
  <MenuTrigger>
    <Button>Alignment</Button>
    <Popover>
      <Menu>
        <MenuItem>Left</MenuItem>
        <MenuItem>Center</MenuItem>
        <MenuItem>Right</MenuItem>
      </Menu>
    </Popover>
  </MenuTrigger>
  <Separator orientation="vertical" />
  <Checkbox>
    <div className="checkbox">
      <svg viewBox="0 0 18 18" aria-hidden="true">
        <polyline points="1 9 7 14 15 4" />
      </svg>
    </div>
    Night Mode
  </Checkbox>
</Toolbar>

import {
  Button,
  Checkbox,
  Menu,
  MenuItem,
  MenuTrigger,
  Popover,
  Separator,
  ToggleButton,
  Toolbar
} from 'react-aria-components';

<Toolbar>
  <ToggleButton>
    <strong>B</strong>
  </ToggleButton>
  <ToggleButton>
    <div style={{ textDecoration: 'underline' }}>U</div>
  </ToggleButton>
  <ToggleButton>
    <i>I</i>
  </ToggleButton>
  <Separator orientation="vertical" />
  <Button>Copy</Button>
  <Button>Paste</Button>
  <Button>Cut</Button>
  <Separator orientation="vertical" />
  <MenuTrigger>
    <Button>Alignment</Button>
    <Popover>
      <Menu>
        <MenuItem>Left</MenuItem>
        <MenuItem>Center</MenuItem>
        <MenuItem>Right</MenuItem>
      </Menu>
    </Popover>
  </MenuTrigger>
  <Separator orientation="vertical" />
  <Checkbox>
    <div className="checkbox">
      <svg viewBox="0 0 18 18" aria-hidden="true">
        <polyline points="1 9 7 14 15 4" />
      </svg>
    </div>
    Night Mode
  </Checkbox>
</Toolbar>

import {
  Button,
  Checkbox,
  Menu,
  MenuItem,
  MenuTrigger,
  Popover,
  Separator,
  ToggleButton,
  Toolbar
} from 'react-aria-components';

<Toolbar>
  <ToggleButton>
    <strong>B</strong>
  </ToggleButton>
  <ToggleButton>
    <div
      style={{
        textDecoration:
          'underline'
      }}
    >
      U
    </div>
  </ToggleButton>
  <ToggleButton>
    <i>I</i>
  </ToggleButton>
  <Separator orientation="vertical" />
  <Button>Copy</Button>
  <Button>
    Paste
  </Button>
  <Button>Cut</Button>
  <Separator orientation="vertical" />
  <MenuTrigger>
    <Button>
      Alignment
    </Button>
    <Popover>
      <Menu>
        <MenuItem>
          Left
        </MenuItem>
        <MenuItem>
          Center
        </MenuItem>
        <MenuItem>
          Right
        </MenuItem>
      </Menu>
    </Popover>
  </MenuTrigger>
  <Separator orientation="vertical" />
  <Checkbox>
    <div className="checkbox">
      <svg
        viewBox="0 0 18 18"
        aria-hidden="true"
      >
        <polyline points="1 9 7 14 15 4" />
      </svg>
    </div>
    Night Mode
  </Checkbox>
</Toolbar>

.react-aria-Toolbar {
  --separator-color: var(--spectrum-global-color-gray-500);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 15px;
  border: 1px solid var(--separator-color);

  &[data-orientation=vertical] {
    flex-direction: column;
  }

  &[data-orientation=horizontal] {
    flex-direction: row;
  }
}

.react-aria-ToggleButton {
  width: 32px;
}

.react-aria-Separator {
  width: 2px;
  margin: 0px 10px;
  align-self: stretch;
  background-color: var(--separator-color);
}

.react-aria-Toolbar {
  --separator-color: var(--spectrum-global-color-gray-500);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 15px;
  border: 1px solid var(--separator-color);

  &[data-orientation=vertical] {
    flex-direction: column;
  }

  &[data-orientation=horizontal] {
    flex-direction: row;
  }
}

.react-aria-ToggleButton {
  width: 32px;
}

.react-aria-Separator {
  width: 2px;
  margin: 0px 10px;
  align-self: stretch;
  background-color: var(--separator-color);
}

.react-aria-Toolbar {
  --separator-color: var(--spectrum-global-color-gray-500);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 15px;
  border: 1px solid var(--separator-color);

  &[data-orientation=vertical] {
    flex-direction: column;
  }

  &[data-orientation=horizontal] {
    flex-direction: row;
  }
}

.react-aria-ToggleButton {
  width: 32px;
}

.react-aria-Separator {
  width: 2px;
  margin: 0px 10px;
  align-self: stretch;
  background-color: var(--separator-color);
}

Features#

Toolbar provides keyboard navigation and announcements for groups of interactive elements. Toolbar helps implement these in an accessible way.

• Flexible – Support for various RAC or Aria Hooks implemented components.
• Accessible – Follows the ARIA toolbar pattern with support for keyboard arrow key navigation and is a single tab stop.
• Styleable – Can be styled in any custom way, including extra DOM structure between the Toolbar and the interactive children.

Anatomy#

Toolbar consists of a wrapping element which controls arrow key navigation depending on the orientation and children.

Props#

Toolbar#

Separator#

A <Separator> can be placed between elements and groups in a toolbar.

Styling#

React Aria components can be styled in many ways, including using CSS classes, inline styles, utility classes (e.g. Tailwind), CSS-in-JS (e.g. Styled Components), etc. By default, all components include a builtin className attribute which can be targeted using CSS selectors. These follow the react-aria-ComponentName naming convention.

.react-aria-Toolbar {
  /* ... */
}

.react-aria-Toolbar {
  /* ... */
}

.react-aria-Toolbar {
  /* ... */
}

A custom className can also be specified on any component. This overrides the default className provided by React Aria with your own.

<Toolbar className="my-toolbar">
  {/* ... */}
</Toolbar>

<Toolbar className="my-toolbar">
  {/* ... */}
</Toolbar>

<Toolbar className="my-toolbar">
  {/* ... */}
</Toolbar>

Separator#

A Separator can be targeted with the .react-aria-Separator CSS selector, or by overriding with a custom className.

Advanced customization#

Contexts#

All React Aria Components export a corresponding context that can be used to send props to them from a parent element. This enables you to build your own compositional APIs similar to those found in React Aria Components itself. You can send any prop or ref via context that you could pass to the corresponding component. The local props and ref on the component are merged with the ones passed via context, with the local props taking precedence (following the rules documented in mergeProps).

Hooks#

If you need to customize things further, such as customizing the DOM structure, you can drop down to the lower level Hook-based API. See useToolbar for more details.