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'23<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>
Link and input
Toolbar.Link and Toolbar.Input join the same arrow-key order as the buttons. The left and right arrow keys also move the text cursor in an input, so use one input at most and put it last.
1<Toolbar>2 <Toolbar.Button>Bold</Toolbar.Button>3 <Toolbar.Button>Italic</Toolbar.Button>4 <Toolbar.Separator />5 <Toolbar.Link href="#">Edited 2 minutes ago</Toolbar.Link>6 <Toolbar.Separator />7 <Toolbar.Input aria-label="Search" placeholder="Search" />8</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 />
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
The toolbar, 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:
| Slot | Element |
|---|---|
toolbar | The root element |
toolbar-button | Toolbar.Button |
toolbar-group | Toolbar.Group wrapper |
toolbar-separator | Toolbar.Separator |
toolbar-link | Toolbar.Link |
toolbar-input | Toolbar.Input |
Accessibility
- Uses
role="toolbar"for proper semantic grouping - Arrow keys navigate between focusable items
HomeandEndkeys jump to first and last items- Focus loops by default (configurable via
loopFocus) - Disabled items remain focusable for screen reader discoverability