Component reference

Toolbar

A group of related controls that shares one Tab stop; the arrow keys move between them.

Preview

Related actions

Actions move with the arrow keys; inputs and selects keep their own keyboard rules, and the toolbar wraps naturally when space runs out.

packages/meowtail/stories/action-controls.stories.tsxline 59tsx

render: () => (
  <Stack gap="relaxed" className="workshop-constrained">
    <Specimen label="Preview actions" align="start">
      <Toolbar label="Preview actions">
        <Button size="small">Desktop</Button>
        <Button variant="quiet" size="small">
          Mobile
        </Button>
        <IconButton size="small" label="Reset preview">
          <Icon name="refresh-cw" />
        </IconButton>
      </Toolbar>
    </Specimen>
    <Specimen label="Filter and preview" align="start">
      <Toolbar label="Filter and preview">
        <Button size="small">Update preview</Button>
        <Input
          aria-label="Filter preview"
          placeholder="Enter filter text"
          style={{ width: "18ch" }}
        />
        <Select aria-label="Preview annotations" style={{ width: "auto" }}>
          <option value="off" selected>
            Annotations off
          </option>
          <option value="controls">Control sizes</option>
          <option value="spacing">Spacing layout</option>
        </Select>
        <ChoiceSelect
          id="toolbar-appearance"
          aria-label="Preview appearance"
          options={[
            { value: "light", label: "Light" },
            { value: "dark", label: "Dark" },
          ]}
          defaultValue="light"
        />
        <Button variant="quiet" size="small">
          Restore default preview
        </Button>
        <Link href="#toolbar-help">View toolbar notes</Link>
      </Toolbar>
      <Note id="toolbar-help">
        Actions share one Tab stop; editing controls remain independently reachable.
      </Note>
    </Specimen>
    <Specimen label="Standalone action group" align="start">
      <Toolbar label="Editing and canvas">
        <Button size="small">Save layout</Button>
        <Button size="small" variant="outline" tabIndex={-1}>
          Programmatic entry point
        </Button>
        <Toolbar label="Canvas zoom">
          <IconButton size="small" label="Zoom out preview">
            <Icon name="minus" />
          </IconButton>
          <IconButton size="small" label="Zoom in preview">
            <Icon name="plus" />
          </IconButton>
        </Toolbar>
        <Button size="small" variant="quiet">
          Cancel editing
        </Button>
      </Toolbar>
    </Specimen>
    <Specimen label="Vertical toolbar" align="start">
      <Toolbar label="Canvas actions" orientation="vertical">
        <IconButton size="small" label="Zoom out canvas">
          <Icon name="minus" />
        </IconButton>
        <IconButton size="small" label="Zoom in canvas">
          <Icon name="plus" />
        </IconButton>
      </Toolbar>
    </Specimen>
  </Stack>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { Toolbar } from "meowtail";

<Toolbar label="Preview actions">
  <Button size="small">Desktop</Button>
  <Button variant="quiet" size="small">
    Mobile
  </Button>
  <IconButton size="small" label="Reset preview">
    <Icon name="refresh-cw" />
  </IconButton>
</Toolbar>

API reference

Props

Prop	Type	Default
`label`RequiredEvery toolbar needs an accessible name, even when its controls are icon-only.	`string`	–
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`

Also takes className, children and the attributes and events of its root element.

DOM parts

root

Registry

The component is registered as toolbar in the meowtail component registry.