# Speed dial

> A floating action button that fans out labelled actions.

Component · Pro · https://lodeui.com/components/speed-dial

## When to use

- Mobile and canvas tools where several create actions share one button.

## When not to use

- More than five actions: use a menu.

## Installation

```bash
npx shadcn@latest add @lode/speed-dial
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { SpeedDial } from "@/components/ui/speed-dial";

<SpeedDial actions={[{ id: "doc", label: "New document", icon: <FileText />, onSelect: createDoc }]} />
```

## API reference

### SpeedDial

A round button that opens a menu of labelled action buttons.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| actions | `{ id; label; icon; onSelect }[]` | – | Actions, nearest first. |
| label | `string` | `"Create"` | Main button name. |
| direction | `"up" \| "left"` | `"up"` | Where the actions fan out. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter / Space | Open or close |
| ↑ / ↓ (or ← / →) | Move between actions |
| Esc | Close |

## Accessibility

- The main button has aria-haspopup="menu" and aria-expanded; actions are named menu items.
- Focus moves into the menu and returns afterwards.

## Motion

- Actions spring out in sequence and fold back in reverse; the plus rotates into a cross.

## Responsive behavior

- Position it fixed in a corner for app-wide use.

## Performance

- Actions render only while open.

## Notes for AI

- Up direction shows labels; use left for tight vertical space.

## Related

- [Dropdown menu](https://lodeui.com/components/dropdown-menu) — Actions, checkboxes and radio options in a springy menu with full keyboard support.
- [Bottom nav](https://lodeui.com/components/bottom-nav) — Mobile tab bar with an animated indicator, badges and safe-area padding.
- [Ripple button](https://lodeui.com/components/ripple-button) — A button that ripples from wherever it's pressed.