Navigation

Toolbar

An accessible button toolbar with roving focus and grouped controls.

Import

tsx

import { Toolbar, ToolbarButton, ToolbarSeparator, ToolbarGroup } from "@cooud-ui/ui";

bash

npx cooud-ui add toolbar

Examples

Formatting

An accessible `role="toolbar"` with roving tabindex — Tab moves in, then the arrow keys move between buttons. Toggle buttons reflect `aria-pressed`, and a separator splits the text marks from the alignment group.

tsx

function ToolbarDemo() {
  const [marks, setMarks] = useState({ bold: true, italic: false, underline: false });
  const [align, setAlign] = useState("left");

  return (
    <Toolbar aria-label="Formatting">
      <ToolbarGroup>
        <ToolbarButton aria-label="Bold" pressed={marks.bold}>
          <Bold aria-hidden="true" />
        </ToolbarButton>
        <ToolbarButton aria-label="Italic" pressed={marks.italic}>
          <Italic aria-hidden="true" />
        </ToolbarButton>
        <ToolbarButton aria-label="Underline" pressed={marks.underline}>
          <Underline aria-hidden="true" />
        </ToolbarButton>
      </ToolbarGroup>
      <ToolbarSeparator />
      <ToolbarGroup>
        <ToolbarButton aria-label="Align left" pressed={align === "left"}>
          <AlignLeft aria-hidden="true" />
        </ToolbarButton>
        <ToolbarButton aria-label="Align center" pressed={align === "center"}>
          <AlignCenter aria-hidden="true" />
        </ToolbarButton>
        <ToolbarButton aria-label="Align right" pressed={align === "right"}>
          <AlignRight aria-hidden="true" />
        </ToolbarButton>
      </ToolbarGroup>
    </Toolbar>
  );
}

API Reference

Generated from the component's exported types.

ToolbarProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout orientation; also drives which arrow keys move focus.

ToolbarButtonProps

Extends ButtonHTMLAttributes<HTMLButtonElement>

Prop	Type	Default	Description
`pressed`	`boolean`	—	Toggle-button pressed state; reflected as aria-pressed.