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

View on GitHub

See the full source code on GitHub

Related Components

View all
Button

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

Previous

Sonner

Next

Spinner