Actions
Toolbar
A toolbar that groups buttons into a single Tab stop. Arrow keys move between items, Home and End jump to the ends, and it supports a horizontal or vertical orientation.
ReactVueWeb Components
View in Storybook Playground
Examples
<Toolbar aria-label="Text formatting">
<Button variant="ghost" size="sm">Bold</Button>
<Button variant="ghost" size="sm">Italic</Button>
<Button variant="ghost" size="sm">Underline</Button>
</Toolbar>Props
| Name | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | horizontal | Layout direction; maps to `aria-orientation`. @default 'horizontal' |
aria-label required | string | — | Accessible label for the toolbar (`aria-label`). |
children required | ReactNode | — | Toolbar items: buttons, toggles, or other controls. |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.