Menus & Navigation

Toolbar

An accessible button toolbar with roving focus and grouped controls.

Import

tsx

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

bash

npx cronus-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>
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component ToolbarDefault layout:inline style:toolbar {
  aria-label:"Formatting"
  label "Formatting"
  text "Bold"
  text "Italic"
}

page "/audit/toolbar/default" type:custom {
  use ToolbarDefault
}

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.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

ToolbarButtonProps

Extends ButtonHTMLAttributes<HTMLButtonElement>

Prop	Type	Default	Description
`pressed`	`boolean`	—	Toggle-button pressed state; reflected as aria-pressed.
`type`	`string`	—	Native type of the underlying element.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`onClick`	`(event: MouseEvent) => void`	—	Click handler.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

ToolbarSeparatorProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

ToolbarGroupProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.