toolbar

Horizontal action toolbar with roving tabindex and a separator.

A role="toolbar" container that manages roving tabindex across its focusable children: buttons, toggles and toggle groups.

Installation

pnpm add @fluixi/toolbar

Usage

import { Toolbar, ToolbarButton, ToolbarSeparator } from '@fluixi/toolbar';
import { ToggleGroup, ToggleGroupItem } from '@fluixi/toggle-group';

<Toolbar aria-label="Text formatting">
  <ToggleGroup type="multiple">
    <ToggleGroupItem value="bold">B</ToggleGroupItem>
    <ToggleGroupItem value="italic">I</ToggleGroupItem>
  </ToggleGroup>
  <ToolbarSeparator />
  <ToolbarButton onClick={insertLink}>Link</ToolbarButton>
</Toolbar>

Parts

Part	Description
`Toolbar`	Root `role="toolbar"`. `orientation` (`horizontal` default).
`ToolbarButton`	A plain action button in the toolbar; participates in roving focus.
`ToolbarSeparator`	Visual divider; `role="separator"`.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.