## Speed Dial (S—117)

A floating + button that rotates to × and fans out labelled mini actions, staggered from the nearest one.

- URL: https://sundaeui.dev/components/speed-dial
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/speed-dial.json`
- Tags: floating-action-button, speed-dial, fab, actions, menu, mobile

Tap the button and its plus turns into a cross while the actions rise one after another, each with a label pill. Tapping outside, Escape or an action closes it.
Labels sit on the left so thumbs do not cover them on phones.

### Usage

```tsx
import { SpeedDial } from '@/components/sundae/speed-dial'

<SpeedDial />
```

### Props

- `actions` (`{ id: string; label: string; icon: ReactNode }[]`, required): Mini actions, nearest first.
- `onAction` (`(id: string) => void`): Called on pick.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Mobile create flows with 2–5 kinds of new item.

### When not to use

- Desktop layouts with room for a toolbar.

### Accessibility

- The main button has aria-expanded and controls a role="menu" of menuitems.
- Focus moves into the menu on open and returns on close.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Esc: Close
- ↑ / ↓: Move between actions