A speed dial is a floating action button that expands into a small set of related actions when activated.
Figma
The Figma reference for SpeedDial will appear here once the design link is added.
Storybook
Interactive examples for SpeedDial will render here once the Storybook link is wired in.
Best practices
- Use it to surface a few closely related actions from a single primary action.
- Keep the number of actions small so the expanded set stays scannable.
- Give every action a clear icon and an accessible label.
- Place it consistently, typically anchored to a screen corner.
Do’s and don’ts
Do
Group a handful of related quick actions behind one primary action.
Don’t
Overload the speed dial with many unrelated actions.
Accessibility
- Each action exposes an accessible label; the trigger conveys its expanded/collapsed state.
- Actions are reachable and operable with the keyboard.