opinion
SpeedDial
A floating button that opens into a short list of labelled actions.
Create menuClick the button to fan out the actions
In context
Projects tabThe button floats above the tab bar, closed and open
Projects
Harbour rebrandBrand, due 24 Oct
On trackTideline mobileProduct, due 7 Nov
ReviewCrew interviewsResearch, due 17 Oct
LateRota exportOperations, due 10 Oct
DoneProjects
Harbour rebrandBrand, due 24 Oct
On trackTideline mobileProduct, due 7 Nov
ReviewCrew interviewsResearch, due 17 Oct
LateRota exportOperations, due 10 Oct
DoneProps
| Prop | Type | Required | Default |
|---|---|---|---|
icon | ReactNode | No | — |
actions | SpeedDialAction[] | Yes | — |
open | boolean | undefined | No | — |
defaultOpen | boolean | undefined | No | — |
onOpenChange | ((open: boolean) => void) | undefined | No | — |
direction | "up" | "down" | "left" | "right" | undefined | No | up |
data-rebar-* attributes
data-rebar-component="speed-dial", data-rebar-direction; the trigger and each action carry data-rebar-part="trigger" | "action".
Migrating to Ant Design
AntD's own FloatButton.Group (with trigger="click") is a close direct equivalent.