Toolbar

When to useLink to "When to use"

• Three or more related controls in a row: editor actions, tree actions, table headers, popup chrome.
• Mixed controls that should share one Tab stop (buttons, a SegmentedControl, a search field).

Use something else when:

• you have one or two actions: place Buttons directly
• the controls are page navigation: links in a navigation landmark

UsageLink to "Usage"

import { IconButton, SearchField, SegmentedControl, Toolbar } from "@arshad-shah/cynosure";
import { code, edit, tree } from "@arshad-shah/cynosure/icons";

<Toolbar label="Document actions">
  <IconButton icon={edit} label="Edit" />
  <SegmentedControl
    label="View"
    defaultValue="tree"
    options={[
      { value: "tree", label: "Tree", icon: tree },
      { value: "raw", label: "Raw", icon: code },
    ]}
  />
  <SearchField label="Search" labelHidden />
</Toolbar>

label is required: a toolbar must have an accessible name.

Fields in a toolbarLink to "Fields in a toolbar"

Text fields keep their own arrow, Home and End keys, so typing still works. Fields sit level with the buttons.

Vertical toolbarsLink to "Vertical toolbars"

Set orientation="vertical" to use Up and Down instead of Left and Right.

loop (default true) wraps from the last control to the first. Set loop={false} to stop at the ends.

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

• Disabled controls are skipped.
• Radios inside (SegmentedControl) are separate stops: arrows move focus and SpaceSpace selects, as in the APG toolbar pattern.
• Late additions: controls added after render join the group automatically.
• Role: role="toolbar" with aria-label and aria-orientation.

ThemingLink to "Theming"

Tokens: --cy-toolbar-gap and --cy-toolbar-padding.

createTheme({ components: { toolbar: { gap: "4px", padding: "6px" } } });

className and style are for layout only.

RelatedLink to "Related"

Button · IconButton · SegmentedControl · SearchField