Toolbar

A row of controls reached with one Tab stop and arrow keys.

Import
import { Toolbar } from '@texuli/primitives/toolbar';
Pattern
Toolbar (WAI-ARIA APG)
Size budget
5.0 KiB gzip for @texuli/primitives/toolbar
Reference
packages/primitives/docs/prim-toolbar.md

Live demo

Loading the Toolbar demo…

Anatomy

Toolbar anatomy: each box holds the parts inside it.
  • Toolbar.Root
    • Toolbar.Button
    • Toolbar.Link
    • Toolbar.Separator
    • Toolbar.Group
      • Toolbar.GroupItem

Behavior checks

tests/behavior/scenarios/toolbar.spec.ts checks the Toolbar scenario in the browser (8 checks) on Chromium, WebKit and the Pixel 7.

  • is one Tab stop that returns to the last item used
  • moves with the arrows, Home and End, and wraps
  • presses toggles and radios with Space and Enter
  • keeps a disabled item focusable but inert
  • mirrors the arrows in right to left
  • works with a pointer, by mouse on desktop and by touch on the phone
  • passes links through the URL policy and names its groups
  • passes axe (${scheme})

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 5.0 KiB gzip for @texuli/primitives/toolbar (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).