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>

API Reference

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

Examples

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>

Composition

Use the render prop on Toolbar.Button to compose with Apsara components like Button and IconButton.

1<Toolbar>
2  <Toolbar.Button
3    render={<Button variant="text" color="neutral" size="small" />}
4  >
5    32px
6  </Toolbar.Button>
7  <Toolbar.Separator />
8  <Toolbar.Group>
9    <Toolbar.Button
10      render={<IconButton variant="text" color="neutral" size="small" />}
11    >
12      <FontBoldIcon />
13    </Toolbar.Button>
14    <Toolbar.Button
15      render={<IconButton variant="text" color="neutral" size="small" />}

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>

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