Speed dialPro
A floating action button that fans out labelled actions.
Press the + button
When to use
- Mobile and canvas tools where several create actions share one button.
When not to use
- More than five actions: use a menu.
Installation
Usage
Import it from @/components/ui/speed-dial after installing.
example.tsx
import { SpeedDial } from "@/components/ui/speed-dial";
<SpeedDial actions={[{ id: "doc", label: "New document", icon: <FileText />, onSelect: createDoc }]} />API reference
SpeedDial
A round button that opens a menu of labelled action buttons.
| Prop | Type | Default | Description |
|---|---|---|---|
| actions | { id; label; icon; onSelect }[] | – | Actions, nearest first. |
| label | string | "Create" | Main button name. |
| direction | "up" | "left" | "up" | Where the actions fan out. |
Keyboard interactions
| Keys | Action |
|---|---|
| EnterorSpace | Open or close |
| ↑or↓ (or ←or→) | Move between actions |
| Esc | Close |
Accessibility
- The main button has aria-haspopup="menu" and aria-expanded; actions are named menu items.
- Focus moves into the menu and returns afterwards.
Motion
- Actions spring out in sequence and fold back in reverse; the plus rotates into a cross.
Responsive behavior
- Position it fixed in a corner for app-wide use.
Performance
- Actions render only while open.
Notes for AI
- Up direction shows labels; use left for tight vertical space.
This page as Markdown, for assistants and coding agents:
/components/speed-dial/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt