Toolbar

A Toolbar is an accessible container that groups a collection of interactive controls—such as buttons, toggle button groups, dropdown triggers, and text fields—into a single logical landmark.

In accordance with the WAI-ARIA Toolbar pattern, Hashti’s Toolbar treats the entire bar as a single tab stop. Keyboard users navigate between individual tools using arrow keys, drastically reducing keystroke overhead in productivity applications, text editors, canvas surfaces, and data table action strips.

ToolbarAccessible command bar with roving arrow navigation.

Import

Hashti exports both compound and named subcomponents:

import { Toolbar, ToolbarGroup, ToolbarItem, ToolbarSeparator } from "@hashti/react";
// Or via compound namespace:
// Toolbar.Root, Toolbar.Group, Toolbar.Item, Toolbar.Separator

Anatomy

<Toolbar>
  <Toolbar.Group aria-label="Text formatting">
    <ToggleButton>B</ToggleButton>
    <ToggleButton>I</ToggleButton>
    <ToggleButton>U</ToggleButton>
  </Toolbar.Group>
  <Toolbar.Separator />
  <Toolbar.Group aria-label="Actions">
    <Button variant="ghost">Insert Link</Button>
    <Button variant="primary">Publish</Button>
  </Toolbar.Group>
</Toolbar>

Examples

In a standard toolbar, action buttons and toggles are grouped logically with separators. The roving tabindex ensures arrow keys move focus seamlessly between items:

import { Toolbar, Button, ToggleButton, Icon } from "@hashti/react";

export function RichTextToolbar() {
  return (
    <Toolbar aria-label="Document editor toolbar" variant="flat">
      <Toolbar.Group aria-label="Font styling">
        <ToggleButton aria-label="Bold">
          <strong>B</strong>
        </ToggleButton>
        <ToggleButton aria-label="Italic">
          <em>I</em>
        </ToggleButton>
        <ToggleButton aria-label="Underline">
          <u>U</u>
        </ToggleButton>
      </Toolbar.Group>

      <Toolbar.Separator />

      <Toolbar.Group aria-label="Alignment">
        <Button variant="ghost" size="md" iconOnly aria-label="Align left">
          <Icon name="chevronLeft" />
        </Button>
        <Button variant="ghost" size="md" iconOnly aria-label="Align right">
          <Icon name="chevronRight" />
        </Button>
      </Toolbar.Group>

      <Toolbar.Separator />

      <Toolbar.Group aria-label="History">
        <Button variant="ghost" size="md">
          Undo
        </Button>
        <Button variant="ghost" size="md">
          Redo
        </Button>
      </Toolbar.Group>
    </Toolbar>
  );
}

Visual Variants

Hashti provides three design token surface variants for toolbars:

flat (default): Quiet background seamlessly blending with parent containers.
raised: Raised elevation surface (--surface-raised) with subtle drop shadow for floating canvases and desktop palettes.
floating: Pill-style rounded elevation anchored above content areas or modals.

import { Toolbar, Button, Icon } from "@hashti/react";

export function FloatingCanvasToolbar() {
  return (
    <Toolbar variant="floating" size="sm" aria-label="Canvas inspection tools">
      <Toolbar.Group aria-label="Zoom controls">
        <Button variant="ghost" size="sm" iconOnly aria-label="Zoom in">
          <Icon name="plus" />
        </Button>
        <Button variant="ghost" size="sm" iconOnly aria-label="Zoom out">
          <Icon name="minus" />
        </Button>
      </Toolbar.Group>
      <Toolbar.Separator />
      <Button variant="secondary" size="sm">
        Reset Canvas
      </Button>
    </Toolbar>
  );
}

Vertical Orientation

For sidebars, creative drawing apps, or secondary inspectors, set orientation="vertical". When vertical, arrow keys automatically flip to ↓ and ↑, and separators orient horizontally:

import { Toolbar, Button, ToggleButton, Icon } from "@hashti/react";

export function DrawingSideToolbar() {
  return (
    <Toolbar orientation="vertical" variant="raised" aria-label="Drawing tools">
      <Toolbar.Group aria-label="Select mode">
        <ToggleButton aria-label="Pointer tool" isSelected>
          <Icon name="menu" />
        </ToggleButton>
        <ToggleButton aria-label="Pencil tool">
          <Icon name="edit" />
        </ToggleButton>
      </Toolbar.Group>
      <Toolbar.Separator />
      <Button variant="danger-ghost" size="sm" iconOnly aria-label="Delete selection">
        <Icon name="trash" />
      </Button>
    </Toolbar>
  );
}

Disabled State

Disable an entire toolbar by setting isDisabled={true} on the root. All child controls inherit this state and are grayed out with focus disabled:

<Toolbar isDisabled aria-label="Read-only editor toolbar">
  <Button variant="ghost">Cut</Button>
  <Button variant="ghost">Copy</Button>
  <Button variant="ghost">Paste</Button>
</Toolbar>

Props Reference

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Axis along which toolbar items are arranged and arrow keys navigate.
`variant`	`'flat' \| 'raised' \| 'floating'`	`'flat'`	Elevation and background surface styling.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Height and padding density scale applied across child items.
`isDisabled`	`boolean`	`false`	Whether all interactive controls in the toolbar are disabled.
`aria-label`	`string`	—	Accessible landmark description required for screen readers.
`children`	`ReactNode`	—	Toolbar groups, separators, and interactive children.
`className`	`string \| ((values) => string)`	—	Custom CSS class or render function.

Toolbar.Group (`ToolbarGroup`)

Prop	Type	Default	Description
`aria-label`	`string`	—	Label announcing the specific group’s purpose (e.g. “Text Alignment”).
`children`	`ReactNode`	—	Interactive controls within this group.

Toolbar.Separator (`ToolbarSeparator`)

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	Automatic	Orientation of the divider rule. Inherits perpendicular axis from toolbar.

Keyboard Interactions

Hashti adheres strictly to the WAI-ARIA 1.2 Toolbar Pattern:

Key	Action
`Tab`	Moves focus into the toolbar (focuses the last active item). Pressing `Tab` again exits the toolbar to the next page landmark.
`→` / `←`	Moves focus horizontally between items in a horizontal toolbar with wrap-around.
`↓` / `↑`	Moves focus vertically between items in a vertical toolbar with wrap-around.
`Home`	Moves focus to the first interactive item in the toolbar.
`End`	Moves focus to the last interactive item in the toolbar.
`Space` / `Enter`	Activates the focused button or toggles the focused toggle button.

Hashti Token Bindings

Token	CSS Variable	Applied Element
Background Flat	`--surface`	Toolbar flat background
Background Raised	`--surface-raised`	Toolbar raised & floating container
Border Divider	`--divider`	Separator line and floating borders
Focus Ring	`--focus`	Focused item 2px offset outline
Hover State	`--surface-hover`	Button/tool hover state
Control Radius	`--radius-md`	Container corner radius (6px)

ToolbarCopy Anchor Link

ImportCopy Anchor Link

AnatomyCopy Anchor Link

ExamplesCopy Anchor Link

Basic Formatting ToolbarCopy Anchor Link

Visual VariantsCopy Anchor Link

Vertical OrientationCopy Anchor Link

Disabled StateCopy Anchor Link

Props ReferenceCopy Anchor Link

Toolbar (Toolbar.Root)Copy Anchor Link

Toolbar.Group (ToolbarGroup)Copy Anchor Link

Toolbar.Separator (ToolbarSeparator)Copy Anchor Link

Keyboard InteractionsCopy Anchor Link

Hashti Token BindingsCopy Anchor Link

On this page