Toolbar

When to use

• An editor’s formatting bar
• Controls above a table or a canvas: zoom, filters, view
• Any row of several controls that act on the same thing

Not for two or three unrelated buttons, such as Cancel and Save.

Choosing between rows of controls:

Component	Use it for	For example
Toolbar	Several controls acting on one thing, reached with one Tab stop and the arrow keys	An editor’s formatting bar
ToggleGroup	A set of Toggles sharing one value	Text alignment, bold / italic / underline
Buttons in a row	A few independent actions, each its own Tab stop	Cancel / Save at the end of a form

BoldItalic

UndoRedo

Shortcuts

import { Toggle, ToggleGroup, Toolbar } from '@arun-dev/ui';
import { docsUrl } from '@/lib/url';

// One Tab stop: Tab in, then the arrow keys across everything, the ToggleGroup included.
export default function ToolbarBasics() {
  return (
    <Toolbar.Root aria-label="Formatting">
      <ToggleGroup aria-label="Style" multiple>
        <Toggle value="bold">Bold</Toggle>
        <Toggle value="italic">Italic</Toggle>
      </ToggleGroup>
      <Toolbar.Separator />
      <Toolbar.Button>Undo</Toolbar.Button>
      <Toolbar.Button disabled>Redo</Toolbar.Button>
      <Toolbar.Separator />
      <Toolbar.Input aria-label="Font size" defaultValue="14" />
      <Toolbar.Link href={docsUrl('/components/kbd/')}>Shortcuts</Toolbar.Link>
    </Toolbar.Root>
  );
}

Toolbar is role="toolbar": a row of controls that is one Tab stop. Tab in, then use the arrow keys to move across its buttons, links, fields and toggles. Home and End jump to the ends, and disabled items are skipped. Tab again leaves.

• Toolbar.Button, Toolbar.Link and Toolbar.Input are the items.
• A ToggleGroup inside joins the same arrow keys.
• Toolbar.Input keeps Left and Right for its caret until the caret reaches an end. Then the arrow key moves on.
• Toolbar.Group groups items, and Toolbar.Separator draws a line between them.

Name it with aria-label.

Props

Toolbar.Root props

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	Which arrow keys move between items.
className	string	—	Concatenated with the component's own classes, never replacing them.
render	ReactElement	—	Element or component to render instead of the default. Props, className, event handlers and ref are merged onto it.
ref	Ref<HTMLElement>	—	Ref to the rendered element. Merged with any ref on the render element.
…rest	HTMLAttributes	—	Anything else is spread onto the rendered element, so id, aria-*, data-* and event handlers all reach the DOM.