Toolbar · Astralis UI

Client component

A role="toolbar" container for grouped controls, on the APG toolbar pattern: arrow keys move focus between the focusable children, Home/End jump to the edges. Compose it with Button, SegmentedControl, CopyButton, or anything focusable.

import { Toolbar, Button } from "astralis-ui";
import { Bold, Italic, Underline, Link2, List, ListOrdered } from "lucide-react";

export function ToolbarDemo() {
  return (
    <Toolbar label="Text formatting">
      <Toolbar.Group aria-label="Style">
        <Button size="sm" variant="text" colorScheme="gray" aria-label="Bold">
          <Bold size={16} />
        </Button>
        <Button size="sm" variant="text" colorScheme="gray" aria-label="Italic">
          <Italic size={16} />
        </Button>
        <Button size="sm" variant="text" colorScheme="gray" aria-label="Underline">
          <Underline size={16} />
        </Button>
      </Toolbar.Group>
      <Toolbar.Separator />
      <Toolbar.Group aria-label="Lists">
        <Button size="sm" variant="text" colorScheme="gray" aria-label="Bulleted list">
          <List size={16} />
        </Button>
        <Button size="sm" variant="text" colorScheme="gray" aria-label="Numbered list">
          <ListOrdered size={16} />
        </Button>
      </Toolbar.Group>
      <Toolbar.Separator />
      <Button size="sm" variant="text" colorScheme="gray" aria-label="Insert link">
        <Link2 size={16} />
      </Button>
    </Toolbar>
  );
}

orientation

import { Button, Toolbar } from "astralis-ui";

<Toolbar
  label="Text formatting"
>
  <Toolbar.Group aria-label="Style">
    <Button size="sm" variant="text" colorScheme="gray">Bold</Button>
    <Button size="sm" variant="text" colorScheme="gray">Italic</Button>
  </Toolbar.Group>
  <Toolbar.Separator />
  <Button size="sm" variant="text" colorScheme="gray">Link</Button>
</Toolbar>

Import#

import { Toolbar } from "astralis-ui";

Accessibility#

Give every toolbar a label: a toolbar without a name is just a row of buttons.
Icon-only controls need their own aria-label (or a VisuallyHidden text).

Props#

Extends div props:

Prop	Type	Default	Description
`label`	`string`	None	Accessible name, set as aria-label. A toolbar without one is just a row of buttons.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction, and which arrow keys move focus.

Parts#

Prop	Type	Default	Description
`Toolbar.Group`	`div props`	None	A cluster of related controls with the group role. Give it an aria-label.
`Toolbar.Separator`	`div props`	None	A vertical rule between groups.

Keyboard#

With focus on a control in the toolbar:

Key	Action
`←` / `→`	Previous / next control (horizontal; wraps at the ends)
`↑` / `↓`	Previous / next control (vertical; wraps at the ends)
`Home` / `End`	First / last control
`Tab`	Next control, or out of the toolbar after the last one

Disabled controls are skipped. Every control keeps its own tab stop, so Tab also walks through them one by one.