Toolbar

Group frequently used controls into one keyboard-ready row.

Live example

A reviewed public example, isolated from this page.

Open example 
import { Toolbar } from "heidi-ui";
import "heidi-ui/styles.css";

Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.

Anatomy

  • button<button>

    Focusable toolbar control with full native button props; participates in roving tabindex. Native button type=button. Compose as Toggle.Root's render host for one button with both toolbar and pressed semantics.

    Uses native semantics

  • root<div>

    role=toolbar container; owns arrow-key focus among buttons.

    ARIA role: toolbar

Root properties

  • label
  • orientation
Start building