Speed Dial
A floating action button that fans out labeled quick actions with staggered motion and full keyboard support.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
SpeedDialProps
Also accepts all props of Omit<React.ComponentProps<"div">, "children">
| Prop | Type | Default | Description |
|---|---|---|---|
| actions* required | SpeedDialAction[] | — | — |
| direction | "up" | "left" | "up" | Direction the actions fan out in. Up puts tooltips beside the buttons, left puts them underneath. |
| label | string | "Quick actions" | Accessible name of the main button and of the menu |
| icon | React.ReactNode | — | Icon of the main button; it rotates 45 degrees while open |
| defaultOpen | boolean | false | — |
| onOpenChange | (open: boolean) => void | — | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/speed-dial.json