build69 / Components / Buttons & Actions / SpeedDial

SpeedDial

v1.0.1NewUpdated 20 Jul 2026

Floating action button that expands a radial cluster of sub-actions. All four directions, tooltip placement per action, optional backdrop, open-on-hover or click.

View source ← Back to catalog

Preview

Live · 12 stories

DefaultOpen ↗

▸Why this is recommendedspeed-dialfabradialmui+2

The default, out-of-the-box SpeedDial.

Recommended for+14

✓Compact primary CTA with 3-5 related sub-actions
✓Mobile compose menus
✓Quick-action overlays

Tags+6

speed-dialfabradialmuictadefault

Features+4

FAB with radial sub-actions
All four directions (up / down / left / right)
Per-action tooltip
Open on hover or click
Optional dim backdrop
Tonal action variants

Not recommended for−2

✕Long menus (use DropdownMenu)
✕Single primary action (use Fab)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "SpeedDial" })

Usage

import { SpeedDial } from '@/components/actions/speed-dial';
import { Plus, Mail, Calendar } from 'lucide-react';

<SpeedDial
  icon={<Plus />}
  actions={[
    { id: 'mail', label: 'New email', icon: <Mail /> },
    { id: 'event', label: 'New event', icon: <Calendar /> },
  ]}
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired

direction

Expansion direction

'up' | 'down' | 'left' | 'right'—

openOn

Open trigger

'hover' | 'click'—

backdrop

Dim page behind dial

boolean—

actions

Sub-action list

SpeedDialAction[]yes

Platform docs All components Source files

SpeedDial

Preview

Install

Usage

Props

Related