A floating action button that expands a stack of secondary actions. Supports up/down/left/right expansion, corner placement, optional labels, and closes on outside click, Escape, or action press.
Pass an SpeedDialAction[] and listen for (actionClick). Use [fixed]="false" inside a relative container for demos and page sections.
Last action: —
Set direction to up, down, left, or right.
Enable showLabels to show each action’s label. Mark actions with disabled: true to prevent activation.
Run the following command to add this component to your project:
npx base-ui-cli add speed-dial
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-ui-cli add speed-dial
// Paths are relative to aliases.components (default: src/app/components)
import { SpeedDialAction, SpeedDialComponent } from './speed-dial/speed-dial.component';
@Component({
selector: 'app-your-component',
imports: [
SpeedDialComponent
],
template: `...`
})
export class YourComponent {} API for speed-dial — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
SpeedDialAction | icon | string | — | Icon name from the sprite sheet. |
SpeedDialAction | label | string | — | Optional visible label next to the action button. |
SpeedDialAction | ariaLabel | string | — | Accessible name; falls back to `label` or `icon`. |
SpeedDialAction | color | IconButtonColor | — | Optional semantic color for this action button. |
SpeedDialAction | disabled | boolean | — | When true, the action cannot be activated. |
SpeedDialAction | id | string | — | Optional id for tracking / event payloads. |
base-speed-dial | actions | SpeedDialAction[] | [] | Actions revealed when the dial is open. |
base-speed-dial | direction | SpeedDialDirection | 'up' | Direction the action stack expands from the trigger. |
base-speed-dial | position | SpeedDialPosition | 'bottom-right' | Corner placement when positioned against the viewport or a relative parent. |
base-speed-dial | fixed | boolean | true | When true (default), uses `position: fixed`. Set false for `absolute` inside a `relative` parent. |
base-speed-dial | color | IconButtonColor | 'primary' | Trigger / default action button color. |
base-speed-dial | size | IconButtonSize | 'lg' | Size of the trigger and action icon buttons. |
base-speed-dial | openIcon | unknown | 'plus' | Icon shown on the trigger when closed. |
base-speed-dial | closeIcon | unknown | 'x' | Icon shown on the trigger when open. |
base-speed-dial | showLabels | boolean | false | When true, shows each action’s `label` beside the button. |
base-speed-dial | closeOnAction | boolean | true | When true, clicking an action closes the dial (default). |
base-speed-dial | ariaLabel | unknown | 'Speed dial' | Accessible name for the speed-dial group / trigger. |
base-speed-dial | class | string | '' | Extra host classes merged via `cn()`. |
base-speed-dial | open | boolean | false | Open state (two-way). Prefer `[(open)]` when controlling from outside. |
base-speed-dial | (actionClick) | SpeedDialAction | — | Emitted when an enabled action button is clicked. |
Content