Toolbar

A container for grouping interactive controls with accessible keyboard navigation.

1<Toolbar>
2  <Toolbar.Button>Bold</Toolbar.Button>
3  <Toolbar.Button>Italic</Toolbar.Button>
4  <Toolbar.Button>Underline</Toolbar.Button>
5  <Toolbar.Separator />
6  <Toolbar.Button>Left</Toolbar.Button>
7  <Toolbar.Button>Center</Toolbar.Button>
8  <Toolbar.Button>Right</Toolbar.Button>
9</Toolbar>

Anatomy

Import and assemble the component:

1import { Toolbar } from '@raystack/apsara'
2

3<Toolbar>
4  <Toolbar.Button />
5  <Toolbar.Group>
6    <Toolbar.Button />
7    <Toolbar.Button />
8  </Toolbar.Group>
9  <Toolbar.Separator />
10  <Toolbar.Link />
11  <Toolbar.Input />
12</Toolbar>

Usage

A toolbar gives its children one tab stop and arrow-key movement between them. What goes inside is up to you.

Grouped

Use Toolbar.Group to group related buttons.

1<Toolbar>
2  <Toolbar.Group>
3    <Toolbar.Button>Bold</Toolbar.Button>
4    <Toolbar.Button>Italic</Toolbar.Button>
5    <Toolbar.Button>Underline</Toolbar.Button>
6  </Toolbar.Group>
7  <Toolbar.Separator />
8  <Toolbar.Group>
9    <Toolbar.Button>Left</Toolbar.Button>
10    <Toolbar.Button>Center</Toolbar.Button>
11    <Toolbar.Button>Right</Toolbar.Button>
12  </Toolbar.Group>
13</Toolbar>

Vertical

Use the orientation prop to render the toolbar vertically.

1<Toolbar orientation="vertical">
2  <Toolbar.Group>
3    <Toolbar.Button>Bold</Toolbar.Button>
4    <Toolbar.Button>Italic</Toolbar.Button>
5    <Toolbar.Button>Underline</Toolbar.Button>
6  </Toolbar.Group>
7  <Toolbar.Separator />
8  <Toolbar.Group>
9    <Toolbar.Button>Left</Toolbar.Button>
10    <Toolbar.Button>Center</Toolbar.Button>
11    <Toolbar.Button>Right</Toolbar.Button>
12  </Toolbar.Group>
13</Toolbar>

Composition

Use the render prop to compose with other components.

1<Toolbar>
2  <Toolbar.Group aria-label="Alignment" render={<Toggle.Group />}>
3    <Toolbar.Button render={<Toggle size={4} />}>
4      <AlignLeft size={16} strokeWidth={1.5} />
5    </Toolbar.Button>
6    <Toolbar.Button render={<Toggle size={4} />}>
7      <AlignRight size={16} strokeWidth={1.5} />
8    </Toolbar.Button>
9  </Toolbar.Group>
10  <Toolbar.Separator />
11  <Toolbar.Group aria-label="Numerical format">
12    <Toolbar.Button aria-label="Format as currency">Format</Toolbar.Button>
13  </Toolbar.Group>
14  <Toolbar.Separator />
15  <Select defaultValue="Helvetica">

Disabled

Disable all toolbar items by setting disabled on the root.

1<Toolbar disabled>
2  <Toolbar.Button>Bold</Toolbar.Button>
3  <Toolbar.Button>Italic</Toolbar.Button>
4  <Toolbar.Separator />
5  <Toolbar.Button>Left</Toolbar.Button>
6</Toolbar>

API Reference

A root, and the controls that know how to sit inside it.

Root

Groups all toolbar controls. Manages keyboard navigation between items.

Prop

Type

Button

An interactive button within the toolbar. Supports the render prop to compose with other components like Button or IconButton.

Prop

Type

Group

Groups related toolbar items together.

Prop

Type

Separator

A visual divider between toolbar sections.

Prop

Type

Link

An anchor element for navigation within the toolbar.

Prop

Type

Input

A native input element with integrated keyboard navigation.

Prop

Type

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

SlotElement
toolbarThe root element
toolbar-buttonToolbar.Button
toolbar-groupToolbar.Group wrapper
toolbar-separatorToolbar.Separator

Accessibility

  • Uses role="toolbar" for proper semantic grouping
  • Arrow keys navigate between focusable items
  • Home and End keys jump to first and last items
  • Focus loops by default (configurable via loopFocus)
  • Disabled items remain focusable for screen reader discoverability