Action Bar

Floating action bar pill for canvas tools, block insertion, and rich editor controls with searchable popovers.

// Plain markup
import { ActionBar } from "@shavin/ui";

Live

Triggered Actions (0)

Open a group and pick an item…

const groups: ActionBarGroup[] = [
  { key: "layouts", label: "Layouts", icon: <LayoutIcon />, items: [
    { value: "hero", label: "Hero section", keywords: ["banner"] },
    { value: "two-col", label: "Two columns", keywords: ["split"] },
  ]},
  { key: "text", label: "Text", icon: <TextIcon />, items: [
    { value: "heading", label: "Heading" },
    { value: "paragraph", label: "Paragraph" },
  ]},
];

<ActionBar
  groups={groups}
  onAction={(groupKey, value) => console.log(groupKey, value)}
/>

Usage

The bar does not position itself — it renders inline-flex / w-fit. Wrap it in a fixed container (e.g. fixed bottom-6 left-1/2 -translate-x-1/2) to make it hover over your canvas. Each group opens one search-filtered popover above the bar; only one is open at a time. Type to filter by label or keywords, press Enter to trigger the first match, or Escape to close.

Props

Prop	Type	Default
groups*	ActionBarGroup[]	—
onAction	(groupKey: string, value: string) => void	—
onInsert	(groupKey: string, value: string) => void	—
className	string	—
ariaLabel	string	—

* required