Recipe

Speed Dial FAB

A floating action button that expands into a radial menu of secondary actions. Tap the main button to reveal options with a staggered animation.

📎

📷

✏️

Structure

The component wraps a fixed-position container anchored to the bottom-right corner. A primary FAB sits at the base, and secondary action buttons stack above it. Each secondary button uses a CSS transition with a staggered delay so they fan out smoothly when the menu opens.

States

Collapsed — only the primary FAB is visible. Tapping it toggles the menu.
Expanded — secondary buttons slide up with a staggered delay. The primary icon rotates 45° to indicate the open state.
Pressed — each button scales down to 95% on active, with a subtle ring highlight.

Tailwind recipe

<div class="fixed bottom-6 right-6 flex flex-col-reverse items-center gap-3">
  <button class="h-14 w-14 rounded-full bg-violet-500
    shadow-lg shadow-violet-500/25 transition-transform
    duration-200 hover:scale-105 active:scale-95">
    <!-- plus icon -->
  </button>
  <button class="h-10 w-10 rounded-full bg-white/10
    transition-all duration-200 hover:bg-white/20
    active:scale-95">
    <!-- action icon -->
  </button>
</div>