SpeedDial
Button
Speed dial action button with expandable actions, directional expansion, and tooltip labels
Basic SpeedDial
Different Positions
Top Left
Top Right
Bottom Left
Bottom Right
Different Directions
Direction: Up
Direction: Down
Direction: Left
Direction: Right
Different Colors
primary
secondary
success
warning
error
info
Different Sizes
Small
Medium
Large
With Backdrop
Controlled Mode
Current state: Closed
Without Labels
Disabled State
Usage Guidelines
When to Use
- Multiple related actions
- Expandable menus
- Quick action groups
Accessibility
- Actions announced on expand
- aria-expanded state
Performance
- Lazy action rendering
- CSS-based animations
Common Mistakes
- Too many actions
- Actions without labels
Frequently Asked Questions
SpeedDial is an expandable FAB that reveals multiple related actions on hover or click.
Yes, SpeedDial actions can have tooltips for better discoverability.
Related Components
View allButton
Primary action component with variant system, size options, loading states, icon slots, and optional shimmer effects
ButtonGroup
Grouped button layout with shared borders, orientation control, and seamless visual connection between actions
FloatingActionButton
Fixed-position FAB for primary screen actions with animation, positioning options, and extended label support
IconButton
Icon-only button with size variants, accessibility labels, and interaction states