Actions
Speed dial
A floating action button is one action. A speed dial is the version for when there are three or four, and the difference from a pie menu is that these actions keep their labels and come out in a line, which is what makes it the right choice when the actions are not interchangeable and a first-time user has to read them. The trigger rotates into a close mark rather than swapping glyphs, so it stays obviously the same object throughout.
npx shadcn@latest add @minflow/speed-dialWhere to use it
- Mobile and canvas surfaces where creation is the primary verb and there are a few kinds of thing to create.
- Three to five actions. Beyond that the fan stops being scannable and the answer is a menu.
- Reach for Pie menu when the actions are equal and speed matters more than reading; reach for FAB when there is only one.
Variations
Upward
The default, anchored bottom-right. The nearest action appears first, so the fan unrolls out of the trigger rather than arriving all at once.
Sideways
When the control is docked to an edge or a rail and there is no room above it.