Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA floating button that fans out three to six related actions as a menu, with arrow-key navigation, Escape and outside-press to close.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it when a screen has one create action with a few variants: new note, new photo, new scan.
Do not use it for one action (use a FAB) or for navigation. More than six actions belong in a sheet.
import { SpeedDial } from "@/components/ui/speed-dial"<SpeedDial
label="Create"
position="fixed"
actions={[
{ id: "note", label: "Note", icon: <FileTextIcon />, onSelect: newNote },
{ id: "photo", label: "Photo", icon: <ImageIcon />, onSelect: newPhoto },
]}
/>| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
SpeedDial | actions | SpeedDialAction[] | required | { id, label, icon, onSelect? }. |
SpeedDial | label | string | required | Name of the main button and the menu. |
SpeedDial | icon | ReactNode | plus icon | Icon of the main button; turns 45 degrees when open. |
SpeedDial | direction | "up" | "down" | "up" | Which way the actions fan out. |
SpeedDial | open / defaultOpen / onOpenChange | - | - | Controlled state. |
SpeedDial | position | "fixed" | "static" | "static" | Pin to the bottom end corner. |
The component ships with a Testing Library test (speed-dial.test.tsx). jsdom has no touch or layout, so the test drives the component through its keyboard and pointer-free paths and checks roles, names and state.