Toolbar

A group of controls that arrow keys move between — the ARIA role ButtonGroup deliberately does not claim, because claiming it without implementing it is worse than not claiming it.

src/components/ui/toolbar.tsx

About

From the component's own source, where it was written.

A group of controls that arrow keys move between.

This is the role ButtonGroup deliberately does not claim. role="toolbar" is a promise: the group is one tab stop and arrow keys move within it. Making that claim without implementing it is worse than not claiming it, since a screen-reader user is told to use arrows that do nothing.

Focus roves over whatever is currently focusable, recomputed on each key. Toolbars gain and lose buttons as selection changes, and a list cached on mount sends focus to a control that is no longer there.

Install

npx astralyx-ui add toolbar

Usage

import { Toolbar, ToolbarSeparator } from '@/components/ui/toolbar'

<Toolbar>
  <Toggle size="sm"><Bold /></Toggle>
  <ToolbarSeparator />
  <Toggle size="sm"><List /></Toggle>
</Toolbar>

Composer

Change the props and the source below follows.

Props

orientation

tsx

<Toolbar orientation="horizontal">
  <Toggle size="sm"><Bold /></Toggle>
  <ToolbarSeparator />
  <Toggle size="sm"><List /></Toggle>
</Toolbar>

Examples

Formatting bar

tsx

<Toolbar>…</Toolbar>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Toolbar`

A group of controls that arrow keys move between.

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'horizontal'	Decides which arrow keys move focus and sets aria-orientation.

`ToolbarSeparator`

A hairline between groups, with the right role and orientation.

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'vertical'	Decides which arrow keys move focus and sets aria-orientation.

Behaviour

Topic	Detail	Description
focus	roving	Recomputed on each key rather than cached on mount — toolbars gain and lose buttons as selection changes.