Toolbar

Grouped controls with arrow-key navigation. Use for formatting bars, inspector tools, and compact action strips.

Examples

Editor

With input

Overview

Toolbar is a focusable group of buttons, links, and inputs. Separators and groups organize related actions. Compose Menu or Tooltip with render when a control opens a popup.

tsx

import {
  Toolbar,
  ToolbarGroup,
  ToolbarButton,
  ToolbarSeparator,
  ToolbarLink,
} from "@standard-ui/react"

<Toolbar aria-label="Formatting">
  <ToolbarGroup>
    <ToolbarButton aria-label="Bold">B</ToolbarButton>
    <ToolbarButton aria-label="Italic">I</ToolbarButton>
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarLink href="#">Docs</ToolbarLink>
</Toolbar>

Usage

Input placement

In a horizontal toolbar, use at most one input and place it last — arrow keys also move the caret inside inputs.

tsx

<Toolbar aria-label="Search tools">
  <ToolbarButton aria-label="Home">…</ToolbarButton>
  <ToolbarSeparator />
  <ToolbarInput placeholder="Filter…" aria-label="Filter" />
</Toolbar>

Anatomy

tsx

Toolbar
  ToolbarGroup
    ToolbarButton
  ToolbarSeparator
  ToolbarLink
  ToolbarInput

API

Part	Role
Toolbar	Root toolbar with orientation and focus loop.
ToolbarGroup	Groups related controls.
ToolbarButton	Action or popup trigger inside the toolbar.
ToolbarLink	Navigational item rendered as an anchor.
ToolbarInput	Native input integrated with toolbar focus.
ToolbarSeparator	Visual and semantic divider between groups.

Guidelines

Do

Label the toolbar with aria-label for screen readers
Group related actions and separate with separators
Prefer icon-only buttons with clear aria-labels

Don't

Don't pack multiple inputs into a horizontal toolbar
Don't use Toolbar for page-level navigation — use nav
Don't omit labels on icon-only controls