SpeedDial | Neural UI v2

Usage

items defines stable action keys and labels. Bind open and accept openChange for controlled visibility; null enables local open state. direction and type choose the arrangement, radius is the radial distance, and mask optionally adds a backdrop. Reserve enough space around the trigger. Item and trigger Templates supply visual content while Core keeps accessible names and wrappers.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Events: 0

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

Events: 0

disabled

radius

mask

hideOnClickOutside

Advanced options · 5

<div class="remaining-speed-stage">
  <neu-speed-dial
    [items]="items()"
    [open]="open()"
    (openChange)="open.set($event)"
    [disabled]="false"
    [direction]="'up'"
    [type]="'linear'"
    [radius]="64"
    [mask]="false"
    [hideOnClickOutside]="true"
    [ariaLabel]="'Quick actions'"
    (itemActivate)="record('itemActivate', $event.item.key)"
  ></neu-speed-dial>
</div>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

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

export const items = signal([
  {
    "key": "create",
    "label": "Create",
    "icon": "add"
  },
  {
    "key": "share",
    "label": "Share",
    "icon": "move-right"
  },
  {
    "key": "delete",
    "label": "Delete",
    "icon": "close",
    "disabled": true
  }
]);

export const open = signal(false);

Data, callback and structured configuration inputs

These inputs require a model or function, not a checkbox. Edit the same-named field in the Source component and bind it in the template; data already used by this preview appears in the state above.

animation · Readonly<NeuSpeedDialAnimationConfig>

In Source: define animation with this type and use [animation]="animation" (or animation() for a signal).

items · readonly NeuSpeedDialItem[]

In Source: define items with this type and use [items]="items" (or items() for a signal).

tooltip · Readonly<NeuSpeedDialTooltipConfig> | null

In Source: define tooltip with this type and use [tooltip]="tooltip" (or tooltip() for a signal).

State and events

items defines stable action keys and labels. Bind open and accept openChange for controlled visibility; null enables local open state. direction and type choose the arrangement, radius is the radial distance, and mask optionally adds a backdrop. Reserve enough space around the trigger. Item and trigger Templates supply visual content while Core keeps accessible names and wrappers.

Accessibility and keyboard

Enter/Space opens the trigger. Arrow keys move through enabled actions; Escape closes and returns focus to the trigger.

Key	Action
`Tab`	Reach the trigger and available native actions.
`Enter`	Open the action menu from its trigger or activate the focused enabled action.
`Space`	Open the action menu from its trigger or activate the focused enabled action.
`Arrow keys`	Move focus among available menu actions according to its orientation.
`Home`	Focus the first available menu action.
`End`	Focus the last available menu action.
`Escape`	Close the action menu and return focus to the trigger.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`animation`	`Readonly<NeuSpeedDialAnimationConfig>`	`{}`	`[animation]`	Optional per-item delay and trigger rotation settings.
`ariaDescribedBy`	`string \| null`	`null`	`[ariaDescribedBy]`	IDs of elements describing the control, separated by spaces.
`ariaLabel`	`string \| null`	`'Quick actions'`	`[ariaLabel]`	Accessible name of the control or region.
`ariaLabelledBy`	`string \| null`	`null`	`[ariaLabelledBy]`	IDs of existing elements naming this control or region.
`direction`	`NeuSpeedDialDirection`	`'up'`	`[direction]`	Direction in which quick actions unfold: up, down, left or right.
`disabled`	`boolean`	`false`	`[disabled]`	Prevents interaction with this control.
`hideOnClickOutside`	`boolean`	`true`	`[hideOnClickOutside]`	Close the quick-action list when the user clicks outside.
`id`	`string \| undefined`	No default	`[id]`	Optional stable host id. Keep ids unique when displaying several menus.
`items`	`readonly NeuSpeedDialItem[]`	`[]`	`[items]`	Applied item collection. Stable keys and accessors identify entries; the component does not mutate the array.
`mask`	`boolean`	`false`	`[mask]`	Shows a backdrop behind the expanded quick-action menu.
`open`	`boolean \| null`	`null`	`[open]`	Applied open state; null enables local visibility. Accept openChange for controlled changes.
`radius`	`number`	`80`	`[radius]`	Distance in pixels used by radial quick-action layouts.
`tabindex`	`number`	`0`	`[tabindex]`	Tab order of the quick-action trigger.
`tooltip`	`Readonly<NeuSpeedDialTooltipConfig> \| null`	`null`	`[tooltip]`	Optional tooltip configuration; item labels remain the accessible names.
`type`	`NeuSpeedDialType`	`'linear'`	`[type]`	Action layout: linear, circle, semi-circle or quarter-circle.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`closed`	`NeuSpeedDialVisibilityEvent`	`(closed)="onClosed($event)"`	Reports closure of this component. Consult the payload type for the emitted data.
`itemActivate`	`NeuSpeedDialItemEvent`	`(itemActivate)="onItemActivate($event)"`	Reports the quick action and original event after activation.
`openChange`	`boolean`	`(openChange)="onOpenChange($event)"`	Proposes the next visibility state. Apply it to open when using controlled visibility.
`opened`	`NeuSpeedDialVisibilityEvent`	`(opened)="onOpened($event)"`	Reports opening of this component. Consult the payload type for the emitted data.
`triggerClick`	`MouseEvent`	`(triggerClick)="onTriggerClick($event)"`	Reports the native click on the quick-action trigger.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`NeuSpeedDialItemDirective`View example	Public template directive (entrypoint)	`ng-template[neuSpeedDialItem]`
`NeuSpeedDialTriggerDirective`View example	Public template directive (entrypoint)	`ng-template[neuSpeedDialTrigger]`

NeuSpeedDialItemDirectiveView example

Public template directive (entrypoint)

ng-template[neuSpeedDialItem]

Declaration

Full context

import type { NeuSpeedDialItemTemplateContext } from '@neural-ui/core/speed-dial';

import { NeuSpeedDialItemDirective } from '@neural-ui/core/speed-dial';

// Public declaration (reference only)
readonly templateRef: TemplateRef<NeuSpeedDialItemTemplateContext>;

NeuSpeedDialTriggerDirectiveView example

Public template directive (entrypoint)

ng-template[neuSpeedDialTrigger]

Declaration

Full context

import type { NeuSpeedDialTriggerTemplateContext } from '@neural-ui/core/speed-dial';

import { NeuSpeedDialTriggerDirective } from '@neural-ui/core/speed-dial';

// Public declaration (reference only)
readonly templateRef: TemplateRef<NeuSpeedDialTriggerTemplateContext>;

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

NeuSpeedDialItemDirective

NeuSpeedDialItemDirective

Events: 0

NeuSpeedDialTriggerDirective

NeuSpeedDialTriggerDirective

Events: 0

Public methods

Name	Contract
`close`	`close(): void;`
`open`	`open(): void;`
`toggle`	`toggle(): void;`

Public Types

Open a type to inspect its definition and interface fields.

NeuSpeedDialAnimationConfigTypeScript

import type { NeuSpeedDialAnimationConfig } from '@neural-ui/core/speed-dial';

// Public declaration (reference only)
export interface NeuSpeedDialAnimationConfig {
  readonly itemDelay?: number;
  readonly rotateTrigger?: boolean;
}

NeuSpeedDialDirectionTypeScript

import type { NeuSpeedDialDirection } from '@neural-ui/core/speed-dial';

// Public declaration (reference only)
export type NeuSpeedDialDirection = 'up' | 'down' | 'left' | 'right' | 'up-left' | 'up-right' | 'down-left' | 'down-right';

NeuSpeedDialItemTypeScript

import type { NeuSpeedDialItem } from '@neural-ui/core/speed-dial';

// Public declaration (reference only)
export interface NeuSpeedDialItem extends NeuMenuActionLike<NeuSpeedDialItem> {
  data?: unknown;
  key: string;
  label: string;
}

NeuSpeedDialItemEventTypeScript

import type { NeuSpeedDialItem } from '@neural-ui/core/speed-dial';

import type { NeuSpeedDialItemEvent } from '@neural-ui/core/speed-dial';

// Public declaration (reference only)
export interface NeuSpeedDialItemEvent {
  readonly item: NeuSpeedDialItem;
  readonly originalEvent: Event;
}

NeuSpeedDialItemTemplateContextTypeScript

import type { NeuSpeedDialItem } from '@neural-ui/core/speed-dial';

import type { NeuSpeedDialItemTemplateContext } from '@neural-ui/core/speed-dial';

// Public declaration (reference only)
export interface NeuSpeedDialItemTemplateContext {
  readonly $implicit: NeuSpeedDialItem;
  readonly active: boolean;
  readonly disabled: boolean;
  readonly index: number;
  readonly open: boolean;
}

NeuSpeedDialTooltipConfigTypeScript

import type { NeuTooltipPosition } from '@neural-ui/core/tooltip';

import type { NeuSpeedDialTooltipConfig } from '@neural-ui/core/speed-dial';

// Public declaration (reference only)
export interface NeuSpeedDialTooltipConfig {
  readonly position?: NeuTooltipPosition;
}

NeuSpeedDialTriggerTemplateContextTypeScript

import type { NeuSpeedDialTriggerTemplateContext } from '@neural-ui/core/speed-dial';

// Public declaration (reference only)
export interface NeuSpeedDialTriggerTemplateContext {
  readonly $implicit: boolean;
  readonly open: boolean;
}

NeuSpeedDialTypeTypeScript

import type { NeuSpeedDialType } from '@neural-ui/core/speed-dial';

// Public declaration (reference only)
export type NeuSpeedDialType = 'linear' | 'circle' | 'semi-circle' | 'quarter-circle';

NeuSpeedDialVisibilityEventTypeScript

import type { NeuSpeedDialVisibilityReason } from '@neural-ui/core/speed-dial';

import type { NeuSpeedDialVisibilityEvent } from '@neural-ui/core/speed-dial';

// Public declaration (reference only)
export interface NeuSpeedDialVisibilityEvent {
  readonly originalEvent: Event | null;
  readonly reason: NeuSpeedDialVisibilityReason;
}

NeuSpeedDialVisibilityReasonTypeScript

import type { NeuSpeedDialVisibilityReason } from '@neural-ui/core/speed-dial';

// Public declaration (reference only)
export type NeuSpeedDialVisibilityReason = 'trigger' | 'item' | 'escape' | 'outside' | 'mask' | 'disabled' | 'programmatic';

NeuTooltipPositionTypeScript

import type { NeuTooltipPosition } from '@neural-ui/core/tooltip';

// Public declaration (reference only)
type NeuTooltipPosition = 'top' | 'bottom' | 'left' | 'right';

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-primary-dark`	Dark brand shade; outline and ghost Button text in the light theme	Shared by other Core consumers; scope the override.	`#005fcc`
`--neu-primary-fg`	Foreground drawn over the primary background	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-primary-solid`	Solid brand action background	Shared by other Core consumers; scope the override.	`#006ee6`
`--neu-primary-solid-fg`	Foreground of solid brand actions	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-primary-solid-hover`	Hover background of solid brand actions	Shared by other Core consumers; scope the override.	`#005fcc`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`

Related components

Use related components when your task requires a different interaction or a composed control.