Toolbar

Toolbar groups a set of controls — buttons, toggles, and separators — into a single tab stop with arrow-key navigation between the items. It is the container that gives a cluster of actions coherent keyboard semantics.

Import

import { Toolbar, ActionButton } from '@proyecto-viviana/solid-spectrum';

Horizontal

Controls laid out in a row. The toolbar is a single tab stop; arrow keys move between the buttons inside it.

<Toolbar aria-label="Text formatting">
  <ActionButton aria-label="Bold">B</ActionButton>
  <ActionButton aria-label="Italic">I</ActionButton>
  <ActionButton aria-label="Underline">U</ActionButton>
</Toolbar>

Vertical

Set orientation to 'vertical' to stack the controls; Up and Down arrows then drive navigation.

<Toolbar aria-label="Drawing tools" orientation="vertical">
  <ActionButton aria-label="Pen">✎</ActionButton>
  <ActionButton aria-label="Brush">🖌</ActionButton>
  <ActionButton aria-label="Eraser">⌫</ActionButton>
</Toolbar>

Props

Prop	Type	Default	Description
`orientation`	'horizontal' \| 'vertical'	`'horizontal'`	Layout direction, which also selects the arrow keys used to navigate
`aria-label`	string	—	Accessible name for the toolbar (or use aria-labelledby)
`children`	JSX.Element	—	The controls: ActionButtons, toggles, and separators

Accessibility

Renders with a toolbar role and a single tab stop
Requires an aria-label or aria-labelledby to name it
Left/Right arrows navigate a horizontal toolbar; Up/Down a vertical one, per orientation
Tab moves focus out of the toolbar to the next control on the page
Disabled controls are skipped during arrow navigation