Actions

Toolbar

A row of related tools with one Tab stop.

import { Toolbar, ToolbarButton, ToolbarToggleGroup, ToolbarToggleItem, ToolbarSeparator, ToolbarLink } from "@flinbu/seed";

History, alignment and Share

import { Button, Toolbar, ToolbarButton, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem } from "@flinbu/seed";
import { AlignCenter, AlignLeft, AlignRight, Redo2, Share, Undo2 } from "lucide-react";

<Toolbar aria-label="Canvas tools">
  <ToolbarButton asChild><Button variant="ghost" size="sm" icon={<Undo2 />} aria-label="Undo" /></ToolbarButton>
  <ToolbarButton asChild><Button variant="ghost" size="sm" icon={<Redo2 />} aria-label="Redo" /></ToolbarButton>
  <ToolbarSeparator />
  <ToolbarToggleGroup type="single" defaultValue="left" aria-label="Align">
    <ToolbarToggleItem value="left" aria-label="Align left"><AlignLeft size={16} /></ToolbarToggleItem>
    <ToolbarToggleItem value="center" aria-label="Align center"><AlignCenter size={16} /></ToolbarToggleItem>
    <ToolbarToggleItem value="right" aria-label="Align right"><AlignRight size={16} /></ToolbarToggleItem>
  </ToolbarToggleGroup>
  <ToolbarSeparator />
  <ToolbarButton asChild><Button size="sm" leftIcon={<Share />}>Share</Button></ToolbarButton>
</Toolbar>

Use it for

Canvas and editor tools.

Props

Prop	Type	Default	Description
`orientation`	`'horizontal''vertical'`	`'horizontal'`	Direction and arrow keys.
`ToolbarButton: asChild`	`boolean`	–	Wrap a Seed Button so it joins the arrow-key order.

Accessibility

Built on Radix Toolbar: Tab enters and leaves, arrow keys move between tools, toggles report their state. Give it an aria-label.