# Speed Dial

> Floating action button that fans out a set of secondary actions on click.

Source: https://ngwr.dev/reference/components/speed-dial

## Up direction

Click the FAB to expand the fan.

```angular-html
<wr-speed-dial [actions]="actions" (pick)="onPick($event)" />
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `actions` | — | `readonly WrSpeedDialAction[]` | `[]` |
| `triggerLabel` | Accessible name of the trigger. Falls back to `speedDial.label`, then `'Actions'` — the trigger is icon-only, so without this it has no name at all. | `string \| null` | `null` |
| `direction` | Direction the actions fan out. | `WrSpeedDialDirection` | `'up'` |
| `open` | Two-way bindable open state. | `boolean` | `false` |
| `icon` | Icon for the main trigger button. | `WrIconName` | `'add'` |
| `disabled` | Disable interaction. | `boolean` | `false` |
| `safeArea` | Pad the host toward the dial `direction` with `env(safe-area-inset-*)`. Only matters when the consumer pins the dial to that edge of the viewport; otherwise it has no effect. | `boolean` | `false` |
| `(pick)` | Fires when the user picks one of the actions. | `WrSpeedDialAction` | — |

## Types

Data shapes used by the inputs and outputs above.

```angular-ts
interface WrSpeedDialAction {
  id: string;
  label: string;
  icon?: WrIconName;
}
```

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `WrSpeedDialAction` | Per-button action shown when the dial expands. | `interface` | — |
| `id`required | Stable identifier for the action. | `string` | — |
| `label`required | Tooltip / accessible label. | `string` | — |
| `icon` | Button icon. | `WrIconName` | — |

## CSS variables

Custom properties `ngwr/speed-dial` publishes. Each default below is declared on the component's own selector, so a `:root` override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-speed-dial-action-size` | `2.5rem` | `.wr-speed-dial` |
| `--wr-speed-dial-gap` | `0.625rem` | `.wr-speed-dial` |
| `--wr-speed-dial-size` | `3.25rem` | `.wr-speed-dial` |