Skip to main content

​
Overview

The Speed Dial component provides a floating action button (FAB) that expands to reveal a set of related actions. It supports multiple layout types (linear, circular) and various directions.

​
Import

import { MagarySpeedDial } from 'ng-magary';
import { SpeedDialItem } from 'ng-magary';

​
Basic Usage

import { Component } from '@angular/core';
import { MagarySpeedDial, SpeedDialItem } from 'ng-magary';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [MagarySpeedDial],
  template: `
    <magary-speed-dial
      [items]="actions"
      (itemSelect)="onActionSelect($event)"
    />
  `
})
export class DemoComponent {
  actions: SpeedDialItem[] = [
    { icon: 'home', tooltip: 'Home', command: () => this.goHome() },
    { icon: 'user', tooltip: 'Profile', command: () => this.goToProfile() },
    { icon: 'settings', tooltip: 'Settings', command: () => this.openSettings() }
  ];

  onActionSelect(event: { item: SpeedDialItem; event: Event }) {
    console.log('Selected:', event.item.tooltip);
  }

  goHome() { console.log('Navigate to home'); }
  goToProfile() { console.log('Navigate to profile'); }
  openSettings() { console.log('Open settings'); }
}

​
Properties

​
Inputs

​
items
SpeedDialItem[]
required
Array of menu items to display when expanded. Each item defines an action with icon and optional command.
​
icon
string
default:"'plus'"
Lucide icon name for the closed state trigger button
​
activeIcon
string
default:"'x'"
Lucide icon name for the open state trigger button
​
type
SpeedDialType
default:"'linear'"
Layout type for the menu itemsOptions: 'linear' | 'circle' | 'semicircle' | 'quartercircle'
​
direction
SpeedDialDirection
default:"undefined"
Direction in which items expandOptions: 'up' | 'down' | 'left' | 'right' | 'up-left' | 'up-right' | 'down-left' | 'down-right'
​
radius
number
default:"80"
Radius in pixels for circular layouts (circle, semicircle, quartercircle)
​
showMask
boolean
default:"false"
When true, displays an overlay mask behind the speed dial when open
​
background
string | null
default:"null"
Custom background color for the trigger button (CSS color value)
​
triggerSize
number
default:"56"
Size of the trigger button in pixels
​
itemSize
number
default:"40"
Size of each menu item button in pixels
​
itemGap
number
default:"64"
Gap between items in linear layout (pixels)
​
closeOnItemSelect
boolean
default:"true"
When true, the speed dial closes automatically after an item is selected
​
ariaLabel
string
default:"'Speed dial menu'"
ARIA label for the trigger button for accessibility

​
Outputs

​
speedDialToggle
EventEmitter<boolean>
Emitted when the speed dial is opened or closed. Passes the new open state.
​
itemSelect
EventEmitter<{ item: SpeedDialItem; event: Event }>
Emitted when a menu item is clicked. Passes the selected item and the original event.

​
SpeedDialItem Interface

interface SpeedDialItem {
  readonly icon: string;              // Lucide icon name (required)
  readonly tooltip?: string;          // Tooltip text on hover
  readonly command?: (event?: Event) => void;  // Action to execute
  readonly id?: string;               // Unique identifier
  readonly ariaLabel?: string;        // Custom ARIA label
  readonly backgroundColor?: string;  // Custom background color
  readonly disabled?: boolean;        // Disable the item
}

​
Examples

​
Linear Direction

<magary-speed-dial
  [items]="items"
  type="linear"
  direction="up"
/>

​
Circular Layouts

<magary-speed-dial
  [items]="items"
  type="circle"
  [radius]="100"
/>

​
With Mask Overlay

<magary-speed-dial
  [items]="items"
  [showMask]="true"
  type="linear"
  direction="up"
/>

​
Custom Styling

<magary-speed-dial
  [items]="items"
  background="#6366f1"
  [triggerSize]="64"
  [itemSize]="48"
  [itemGap]="72"
  icon="menu"
  activeIcon="x"
/>

​
With Commands and Tooltips

actions: SpeedDialItem[] = [
  {
    icon: 'file-plus',
    tooltip: 'New Document',
    ariaLabel: 'Create new document',
    command: () => this.createDocument()
  },
  {
    icon: 'folder-plus',
    tooltip: 'New Folder',
    ariaLabel: 'Create new folder',
    command: () => this.createFolder()
  },
  {
    icon: 'upload',
    tooltip: 'Upload',
    ariaLabel: 'Upload files',
    command: () => this.uploadFiles(),
    backgroundColor: '#10b981'
  },
  {
    icon: 'trash',
    tooltip: 'Delete (disabled)',
    disabled: true
  }
];

​
Disable Auto-Close

<magary-speed-dial
  [items]="items"
  [closeOnItemSelect]="false"
  (itemSelect)="handleAction($event)"
/>

​
Accessibility

The Speed Dial component includes comprehensive accessibility features:
  • Keyboard Navigation: Press Escape to close the menu
  • Click Outside: Automatically closes when clicking outside
  • ARIA Labels: Proper labels for trigger and items
  • Disabled State: Respects and communicates disabled items
  • Focus Management: Manages focus appropriately

​
Keyboard Support

  • Escape: Close the speed dial menu
  • Click/Touch: Toggle menu or select items

​
Behavior

​
Auto-Close

The speed dial automatically closes when:
  • An item is clicked (if closeOnItemSelect is true)
  • User clicks outside the component
  • User presses the Escape key
  • The mask overlay is clicked (if showMask is true)

​
Transition Animation

Items animate in/out with staggered delays:
  • Linear layout: 34ms/22ms delay steps (open/close)
  • Circular layouts: 26ms/16ms delay steps (open/close)
  • Animation reverses on close (last item first)

​
Component Details

  • Selector: magary-speed-dial
  • Source: /home/daytona/workspace/source/projects/ng-magary/src/lib/Button/speed-dial/speed-dial.ts
  • Standalone: Yes (with CommonModule, LucideAngularModule)
  • Change Detection: OnPush

​
Type Definitions

type SpeedDialType = 'linear' | 'circle' | 'semicircle' | 'quartercircle';

type SpeedDialDirection = 
  | 'up' 
  | 'down' 
  | 'left' 
  | 'right' 
  | 'up-left' 
  | 'up-right' 
  | 'down-left' 
  | 'down-right';

Build docs developers (and LLMs) love

Get started for freeTalk to us