# Speed Dial Speed Dial works best for high-value secondary actions that should stay nearby but hidden until needed. It supports linear, circle, semi-circle, and quarter-circle layouts, optional masking, idle close behavior, tooltip labels, and coordination so only one dial stays open at a time. ## Import ```ts import { SpeedDialComponent, type MenuItem } from 'ui'; ``` ## Linear directions ```ts import { Component, signal } from '@angular/core'; import { MenuItem, SpeedDialComponent } from 'ui'; @Component({ selector: 'app-speed-dial-linear-demo', standalone: true, imports: [SpeedDialComponent], template: `

Linear directions

Linear is the safest layout for edge-triggered quick actions because the expansion path stays predictable.

Linear
Up
Down
Right
Left
`, }) export class SpeedDialLinearDemoComponent { protected readonly items = signal([ { id: 'edit', label: '', icon: 'edit' }, { id: 'refresh', label: '', icon: 'arrow_sync' }, { id: 'delete', label: '', icon: 'delete' }, { id: 'open', label: '', icon: 'open' }, ]); } ``` ## Circle layout ```ts import { Component, signal } from '@angular/core'; import { MenuItem, SpeedDialComponent } from 'ui'; @Component({ selector: 'app-speed-dial-circle-demo', standalone: true, imports: [SpeedDialComponent], template: `

Circle layout

Full radial layout works best when the trigger owns enough surrounding space and the dial is itself a focal interaction.

`, }) export class SpeedDialCircleDemoComponent { protected readonly items = signal([ { id: 'comment', label: '', icon: 'chat' }, { id: 'share', label: '', icon: 'share' }, { id: 'archive', label: '', icon: 'archive' }, { id: 'pin', label: '', icon: 'pin' }, { id: 'copy', label: '', icon: 'copy' }, { id: 'star', label: '', icon: 'star' }, ]); } ``` ## Semi and quarter arcs ```ts import { Component, signal } from '@angular/core'; import { MenuItem, SpeedDialComponent } from 'ui'; @Component({ selector: 'app-speed-dial-arc-demo', standalone: true, imports: [SpeedDialComponent], template: `

Semi and quarter arcs

Arc layouts are useful when the trigger sits on an edge or in a corner and the actions should expand inward.

Semi-circle
Semi
Up
Left
Quarter-circle
Down right
Up left
`, }) export class SpeedDialArcDemoComponent { protected readonly items = signal([ { id: 'add', label: '', icon: 'add' }, { id: 'duplicate', label: '', icon: 'copy' }, { id: 'move', label: '', icon: 'arrow_move' }, { id: 'remove', label: '', icon: 'delete' }, ]); } ``` ## Mask, idle close, and tooltips ```ts import { Component, signal } from '@angular/core'; import { MenuItem, SpeedDialComponent } from 'ui'; @Component({ selector: 'app-speed-dial-behavior-demo', standalone: true, imports: [SpeedDialComponent], template: `

Mask, idle close, and tooltips

These options affect how disruptive or discoverable the dial feels in a busy screen.

Idle 5s
Mask
Tooltips
Event log
{{ eventLog().length > 0 ? eventLog()[0] : 'No events yet.' }}
`, }) export class SpeedDialBehaviorDemoComponent { protected readonly eventLog = signal([]); protected readonly items = signal([ { id: 'edit', label: '', icon: 'edit', action: () => this.log('action: edit') }, { id: 'refresh', label: '', icon: 'arrow_sync', action: () => this.log('action: refresh') }, { id: 'delete', label: '', icon: 'delete', action: () => this.log('action: delete') }, ]); protected readonly tooltipItems = signal([ { id: 'Add', label: '', icon: 'add', action: () => this.log('action: add') }, { id: 'Update', label: '', icon: 'arrow_sync', action: () => this.log('action: update') }, { id: 'Remove', label: '', icon: 'delete', action: () => this.log('action: remove') }, ]); protected log(message: string): void { this.eventLog.update(entries => [message, ...entries].slice(0, 12)); } } ``` ## Coordination between dials ```ts import { Component, signal } from '@angular/core'; import { MenuItem, SpeedDialComponent } from 'ui'; @Component({ selector: 'app-speed-dial-coordination-demo', standalone: true, imports: [SpeedDialComponent], template: `

Coordination between dials

Multiple floating triggers should usually coordinate so only one menu stays open at a time.

Primary actions Create, assign, and start work.
Secondary actions Share, archive, or open related records.
`, }) export class SpeedDialCoordinationDemoComponent { protected readonly primaryItems = signal([ { id: 'create', label: '', icon: 'add' }, { id: 'assign', label: '', icon: 'person_add' }, { id: 'start', label: '', icon: 'play' }, ]); protected readonly secondaryItems = signal([ { id: 'share', label: '', icon: 'share' }, { id: 'archive', label: '', icon: 'archive' }, { id: 'open', label: '', icon: 'open' }, ]); } ``` ## Workspace composition ```ts import { Component, signal } from '@angular/core'; import { ButtonComponent, MenuItem, SpeedDialComponent } from 'ui'; @Component({ selector: 'app-speed-dial-workspace-demo', standalone: true, imports: [SpeedDialComponent, ButtonComponent], template: `

Workspace composition

A realistic speed dial usually complements an existing panel rather than floating alone on a blank canvas.

Campaign workspace Draft assets, schedule updates, and launch collaborative actions from one persistent floating trigger.
Assets 12 visuals, 3 pending approvals
Audience EMEA, trial cohort, active customers
Timing Launch window: next Tuesday at 10:00
`, }) export class SpeedDialWorkspaceDemoComponent { protected readonly items = signal([ { id: 'New draft', label: '', icon: 'edit' }, { id: 'Assign review', label: '', icon: 'person_add' }, { id: 'Schedule send', label: '', icon: 'calendar_clock' }, { id: 'Duplicate', label: '', icon: 'copy' }, ]); } ``` ## Accessibility ### Trigger and menu semantics The trigger exposes menu semantics and controls a menu-like action list. | Element | Accessibility behavior | | --- | --- | | trigger button | exposes `aria-haspopup`, `aria-expanded`, and `aria-controls` | | action list | uses `role="menu"` | | action buttons | use `role="menuitem"` with an accessible label | ### Keyboard and dismissal The trigger itself follows normal button keyboard behavior. Once open, users should still be able to move through the revealed actions with normal focus navigation, and `Escape` dismisses the dial. | Key | Action | | --- | --- | | `Enter` / `Space` on trigger | opens or closes the dial | | `Tab` | moves between the trigger and visible actions | | `Escape` | closes the open dial | | click outside | closes the dial when `hideOnClickOutside` is enabled | ### Usage guidance Only put a small set of meaningful actions in a speed dial. If the actions need long labels, dense grouping, or deep hierarchy, a menu, toolbar, or command palette is usually a better fit.