A floating action button that fans its actions out on an arc or stacks them upward, with a staggered spring, a dimming halo and labels. The plus turns into a close mark.
Trip to Lisbon
Book the tram tour for Saturday
Q3 planning
Hiring plan, two senior roles
Groceries
Oat milk, lemons, basil
npx shadcn@latest add https://hyperblur.dev/r/button-speed-dial.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-speed-dial.tsx.
import { ButtonSpeedDial } from "@/components/hyperblur/button-speed-dial"
<ButtonSpeedDial onSelect={(id) => create(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| actions | { id: string; label: string; icon?: ReactNode }[] | note, photo, voice, upload | Actions in order from the first angle or from the bottom of the stack. |
| layout | "arc" | "stack" | "arc" | Fan the actions on a circle or stack them above the button with visible labels. |
| startAngle | number | 90 | Arc start in degrees, 0 is right and 90 is up. |
| endAngle | number | 180 | Arc end in degrees. The default fans up and to the left for a bottom-right corner. |
| radius | number | 82 | Arc radius in pixels. |
| labelSide | "left" | "right" | "left" | Side of the labels in the stack layout. |
| open | boolean | undefined | Controlled open state. |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | undefined | Called when the dial opens or closes. |
| onSelect | (id: string) => void | undefined | Called with the action id; the dial closes. |
| label | string | "Create" | Accessible label of the main button and the menu. |
| accent | string | "#2f7bff" | Main button and hover color. |
| scrim | boolean | true | Shows a soft dark halo behind the open actions. |