FloatingToolbar

Detached pill toolbar with grouped icon buttons and elevation shadow. Items can be active and have dropdown affordances.

Preview

Usage

import { FloatingToolbar } from '@ramtt/ui'

<FloatingToolbar
  groups={[
    { items: [{ id: 'bold', icon: <BoldIcon />, label: 'Bold', active: true }] },
    { items: [{ id: 'link', icon: <LinkIcon />, label: 'Link' }] },
  ]}
  onItemClick={(id) => run(id)}
/>

Props

Prop	Type	Default	Description
groups*	`ToolbarGroup[]`	—	Groups separated by thin dividers
onItemClick	`(id: string) => void`	—	Fired when an item button is clicked
className	`string`	—	Additional Tailwind classes