Toolbar
toolbarGroups related action controls with roving keyboard focus.
Usage
Basic usage
role=toolbar Container built-in keyboard roaming (arrow keys move focus). ToolbarButton is an ordinary button.
<Toolbar aria-label="Text Format">
<ToolbarButton aria-label="Share"><Share2 className="size-4" />Share</ToolbarButton>
</Toolbar>Switchable button
ToolbarToggle is an uncontrolled switch, and defaultPressed is set to be initially selected. The selected state is filled with the main color, which is different from hover.
<Toolbar aria-label="Text Format">
<ToolbarToggle aria-label="Bold" defaultPressed><Bold className="size-4" /></ToolbarToggle>
<ToolbarToggle aria-label="italic"><Italic className="size-4" /></ToolbarToggle>
<ToolbarToggle aria-label="underline"><Underline className="size-4" /></ToolbarToggle>
</Toolbar>Group + Delimiter
ToolbarGroup aggregates related buttons, ToolbarSeparator inserts vertical lines between groups.
<Toolbar aria-label="Text Format">
<ToolbarGroup>
<ToolbarToggle aria-label="Bold" defaultPressed><Bold className="size-4" /></ToolbarToggle>
<ToolbarToggle aria-label="italic"><Italic className="size-4" /></ToolbarToggle>
</ToolbarGroup>
<ToolbarSeparator />
<ToolbarGroup>
<ToolbarToggle aria-label="Left justified" defaultPressed><AlignLeft className="size-4" /></ToolbarToggle>
<ToolbarToggle aria-label="center"><AlignCenter className="size-4" /></ToolbarToggle>
<ToolbarToggle aria-label="right-justified"><AlignRight className="size-4" /></ToolbarToggle>
</ToolbarGroup>
<ToolbarSeparator />
<ToolbarButton aria-label="Share"><Share2 className="size-4" />Share</ToolbarButton>
</Toolbar>When to use
Use Toolbar for a persistent horizontal or vertical set of related controls such as rich-text formatting, alignment, and sharing. It provides role=toolbar and arrow-key focus movement. Use ContextMenu for actions opened on demand or Command for a Command/Ctrl+K searchable palette.
Import
import { Toolbar, ToolbarButton, ToolbarToggle, ToolbarGroup, ToolbarSeparator } from "@hulianui/ui"Props
Toolbar
| Name | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Layout direction. |
| disabled | boolean | — | Whether the entire toolbar is disabled. |
| loopFocus | boolean | true | Whether keyboard navigation wraps after the final control. |
| aria-label | string | — | Accessible toolbar label. |
| className | string | — | Additional class name. |
ToolbarButton
| Name | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | — | Whether the button is disabled. |
| aria-label | string | — | Accessible label, required for an icon-only button. |
| className | string | — | Additional class name. |
ToolbarToggle
| Name | Type | Default | Description |
|---|---|---|---|
| pressed | boolean | — | Controlled pressed state. |
| defaultPressed | boolean | false | Initial pressed state when uncontrolled. |
| disabled | boolean | — | Whether the toggle is disabled. |
| aria-label | string | — | Accessible label. |
| className | string | — | Additional class name. |
ToolbarGroup: props disabled / aria-label / className; slot children.
ToolbarSeparator: props orientation?: "horizontal" \| "vertical" / className; orientation defaults to "vertical", independently of the root Toolbar's "horizontal" default.
Events
| Event | Type | Description |
|---|---|---|
| onClick | (e: MouseEvent<HTMLButtonElement>) => void | ToolbarButton click handler. |
| onPressedChange | (pressed: boolean) => void | Called when ToolbarToggle changes state. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Child content of Toolbar, ToolbarButton, ToolbarToggle, or ToolbarGroup. |
Example
<Toolbar aria-label="Text formatting">
<ToolbarGroup>
<ToolbarToggle aria-label="Bold" defaultPressed><Bold className="size-4" /></ToolbarToggle>
<ToolbarToggle aria-label="Italic"><Italic className="size-4" /></ToolbarToggle>
</ToolbarGroup>
<ToolbarSeparator />
<ToolbarButton aria-label="Share"><Share2 className="size-4" />Share</ToolbarButton>
</Toolbar>Usage guidelines
- Add
aria-labelto icon-onlyToolbarButtonandToolbarTogglecontrols so screen readers can identify them. - Choose either controlled
pressedor uncontrolleddefaultPressedfor each ToolbarToggle. Mixing both can desynchronize state.
Related
Command · ContextMenu · Accordion · Collapsible · Link · AnimatedThemeToggler