Speed Dial

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.

freenew

Basic usage

Pass an SpeedDialAction[] and listen for (actionClick). Use [fixed]="false" inside a relative container for demos and page sections.

Last action: —

HTML

<ply-speed-dial
  [actions]="actions"
  direction="up"
  position="bottom-right"
  (actionClick)="onAction($event)">
</ply-speed-dial>

TypeScript

actions: SpeedDialAction[] = [
  { id: 'edit', icon: 'edit', label: 'Edit' },
  { id: 'share', icon: 'share', label: 'Share', color: 'accent' },
  { id: 'email', icon: 'email', label: 'Email', color: 'primary' },
];

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-speed-dial-example',
  imports: [
    SpeedDialComponent
  ],
  template: `...`
})
export class SpeedDialExampleComponent {}

Install

bash

npx ply-ui-cli add speed-dial

Direction

Set direction to up, down, left, or right. Pair it with position so the stack opens into the container: right sits on the left edge, down sits at the top.

HTML

<ply-speed-dial direction="up" position="bottom-right" [actions]="actions"></ply-speed-dial>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-speed-dial-example',
  imports: [
    SpeedDialComponent
  ],
  template: `...`
})
export class SpeedDialExampleComponent {}

Install

bash

npx ply-ui-cli add speed-dial

Labels & disabled actions

Enable showLabels to show each action’s label. Mark actions with disabled: true to prevent activation.

HTML

<ply-speed-dial [actions]="labeledActions" showLabels direction="up" position="bottom-right"></ply-speed-dial>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-speed-dial-example',
  imports: [
    SpeedDialComponent
  ],
  template: `...`
})
export class SpeedDialExampleComponent {}

Install

bash

npx ply-ui-cli add speed-dial

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add speed-dial

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-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 reference for speed-dial
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.
`ply-speed-dial`	`actions`	`SpeedDialAction[]`	`[]`	Actions revealed when the dial is open.
`ply-speed-dial`	`direction`	`SpeedDialDirection`	`'up'`	Direction the action stack expands from the trigger.
`ply-speed-dial`	`position`	`SpeedDialPosition`	`'bottom-right'`	Corner placement when positioned against the viewport or a relative parent.
`ply-speed-dial`	`fixed`	`boolean`	`true`	When true (default), uses `position: fixed`. Set false for `absolute` inside a `relative` parent.
`ply-speed-dial`	`color`	`IconButtonColor`	`'primary'`	Trigger / default action button color.
`ply-speed-dial`	`size`	`IconButtonSize`	`'lg'`	Size of the trigger and action icon buttons.
`ply-speed-dial`	`openIcon`	`unknown`	`'plus'`	Icon shown on the trigger when closed.
`ply-speed-dial`	`closeIcon`	`unknown`	`'x'`	Icon shown on the trigger when open.
`ply-speed-dial`	`showLabels`	`boolean`	`false`	When true, shows each action’s `label` beside the button.
`ply-speed-dial`	`closeOnAction`	`boolean`	`true`	When true, clicking an action closes the dial (default).
`ply-speed-dial`	`ariaLabel`	`unknown`	`'Speed dial'`	Accessible name for the speed-dial group / trigger.
`ply-speed-dial`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-speed-dial`	`open`	`boolean`	`false`	Open state (two-way). Prefer `[(open)]` when controlling from outside.
`ply-speed-dial`	`(actionClick)`	`SpeedDialAction`	—	Emitted when an enabled action button is clicked.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).