Toolbar

Compound API — groups, separator, spacer

Toolbar.Group provides role="group" and an optional aria-label.

tsx

import { Toolbar } from "~/components/ui/base/toolbar";

<Toolbar.Root aria-label="Formatting">
  <Toolbar.Group aria-label="History">
    <Toolbar.Button>Undo</Toolbar.Button>
    <Toolbar.Button>Redo</Toolbar.Button>
  </Toolbar.Group>
  <Toolbar.Separator />
  <Toolbar.Group>
    <Toolbar.Link href="#">Help</Toolbar.Link>
  </Toolbar.Group>
  <Toolbar.Spacer />
  <Toolbar.Button>Save</Toolbar.Button>
</Toolbar.Root>

With ToggleGroup

Insert a headless toggle group as a child of the root; the ToggleGroup root style is toned down so it fits inside the toolbar.

tsx

import { Toolbar } from "~/components/ui/base/toolbar";
import { ToggleGroup } from "~/components/ui/base/toggle-group";

<Toolbar.Root aria-label="Text" class="w-full max-w-xl">
  <ToggleGroup.Root value="b" aria-label="Style" class="border-0 bg-transparent p-0 shadow-none">
    <ToggleGroup.Item value="b">B</ToggleGroup.Item>
    <ToggleGroup.Item value="i">I</ToggleGroup.Item>
    <ToggleGroup.Item value="u">U</ToggleGroup.Item>
  </ToggleGroup.Root>
  <Toolbar.Separator />
  <Toolbar.Button type="button">Insert link</Toolbar.Button>
</Toolbar.Root>

Vertical orientation

With orientation="vertical" use orientation="horizontal" on the separator.

tsx

import { Toolbar } from "~/components/ui/base/toolbar";

<Toolbar.Root orientation="vertical" aria-label="Side tools">
  <Toolbar.Button>Select</Toolbar.Button>
  <Toolbar.Button>Pan</Toolbar.Button>
  <Toolbar.Separator orientation="horizontal" />
  <Toolbar.Button>Color</Toolbar.Button>
</Toolbar.Root>

Metadata

Source: meta.generated.json (see npm run generate)

File base/toolbar/meta.generated.json not found or path not allowed.