Toolbar

An accessible role="toolbar" container with roving tabindex — the whole group is a single tab stop and arrow keys move focus between items (Home/End jump to the ends). Compose it from Toolbar.Button, Toolbar.Toggle, Toolbar.Link, and Toolbar.Separator.

Features

Example

import { Toolbar } from '@wire-ui/react'
 
<Toolbar.Root aria-label="Text formatting">
<Toolbar.Toggle aria-label="Bold"><b>B</b></Toolbar.Toggle>
<Toolbar.Toggle aria-label="Italic"><i>I</i></Toolbar.Toggle>
<Toolbar.Separator />
<Toolbar.Button aria-label="Align left">⬅</Toolbar.Button>
<Toolbar.Link href="#">Help</Toolbar.Link>
</Toolbar.Root>

import { Toolbar } from '@wire-ui/react'
 
const btnCls =
  'flex size-9 cursor-pointer items-center justify-center rounded-[8px] text-sm text-black outline-none transition-colors hover:bg-[#f5f5f5] data-[state=on]:bg-black data-[state=on]:text-white data-[focus-visible]:ring-2 data-[focus-visible]:ring-black'
 
<Toolbar.Root
  aria-label="Text formatting"
  className="inline-flex items-center gap-1 rounded-[8px] border border-black bg-white p-1"
>
  <Toolbar.Toggle className={btnCls} aria-label="Bold" defaultPressed><b>B</b></Toolbar.Toggle>
  <Toolbar.Toggle className={btnCls} aria-label="Italic"><i>I</i></Toolbar.Toggle>
  <Toolbar.Toggle className={`${btnCls} underline`} aria-label="Underline">U</Toolbar.Toggle>
  <Toolbar.Separator className="mx-1 h-5 w-px bg-black" />
  <Toolbar.Button className={btnCls} aria-label="Align left">⬅</Toolbar.Button>
  <Toolbar.Button className={btnCls} aria-label="Align center">↔</Toolbar.Button>
  <Toolbar.Separator className="mx-1 h-5 w-px bg-black" />
  <Toolbar.Link href="#" className={`${btnCls} w-auto px-2`}>Help</Toolbar.Link>
</Toolbar.Root>

Styling

Toolbar.Toggle exposes data-state ("on" / "off") and aria-pressed for the pressed look. Toolbar.Root and Toolbar.Separator expose data-orientation. Each interactive item is wired into roving tabindex automatically.

<Toolbar.Toggle className="
  text-black
  data-[state=on]:bg-black data-[state=on]:text-white
">
  <b>B</b>
</Toolbar.Toggle>
 
<Toolbar.Root className="
  inline-flex gap-1
  data-[orientation=vertical]:flex-col
" />

Using data attributes

Toolbar.Root sets data-orientation. Toolbar.Toggle sets data-state. All interactive items carry data-toolbar-item. Toolbar.Separator sets data-orientation (perpendicular to the toolbar’s axis).

/* Pressed toggle */
[data-state="on"] { background: #000; color: #fff; }
 
/* Vertical toolbar */
[data-orientation="vertical"] { flex-direction: column; }

Root props

Also accepts all native <div> attributes.

Button props

Toolbar.Button accepts all native <button> attributes. It is registered into the toolbar’s roving-focus group.

Toggle props

Also accepts all native <button> attributes (including disabled).

Link props

Toolbar.Link accepts all native <a> attributes (e.g. href). It is registered into the toolbar’s roving-focus group.

Separator props

Also accepts all native <div> attributes.

Data attributes

Root sets role="toolbar" and aria-orientation. Separator sets role="separator" and aria-orientation. Toggle sets aria-pressed. Each item uses roving tabindex (tabIndex={0} for the active item, -1 for the rest).

Accessibility

• Implements the WAI-ARIA toolbar pattern with roving tabindex.
• The toolbar is a single tab stop; arrow keys move focus between items along the orientation axis.
• Disabled items (disabled or aria-disabled="true") are skipped during arrow-key navigation.
• Provide an aria-label (or aria-labelledby) on Toolbar.Root to name the toolbar.

Keyboard Interactions