Toolbar

import { Toolbar } from '@tangible/ui';

Interactive docs and examples: Toolbar in Storybook.

Toolbar props

Prop	Type	Default	Description
`aria-label?`	`string`		Accessible label for the toolbar (required for a11y)
`aria-labelledby?`	`string`		ID of element that labels the toolbar
`children?`	`ReactNode`
`className?`	`string`
`loop?`	`boolean`	`true`	Whether arrow keys wrap from end to start (does not affect Home/End)
`orientation?`	`"horizontal" \| "vertical"`	`'horizontal'`	Toolbar orientation - affects arrow key direction
`style?`	`React.CSSProperties`		Inline styles for layout integration

Prop	Type	Description
`aria-label?`	`string`	Accessible label for the group (only adds role="group" if provided)
`aria-labelledby?`	`string`	ID of element that labels the group
`children?`	`ReactNode`
`className?`	`string`

Prop	Type	Default	Description
`children`	`ReactElement`		The focusable element to register as a toolbar item

With Disabled Items: Disabled items are skipped during keyboard navigation.
Vertical Orientation: In vertical orientation, Up/Down arrows navigate instead of Left/Right.
Keyboard Navigation: Keyboard controls:
- Tab: Enter/exit toolbar (lands on last-focused item)
- Arrow Left/Right (horizontal): Move between items
- Arrow Up/Down (vertical): Move between items
- Home: Jump to first item
- End: Jump to last item
Disabled items are skipped. Items inside groups are part of the same navigation sequence.

Other stories: Playground, Course Navigation (LMS), With Groups, With Input Element, No Loop, Mixed Content (interactive page).

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.