Speed Dial | Neural Native

Import

component.ts

import { NeuSpeedDialComponent } from '@neural-ui/native/speed-dial';

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

Your workspace

Create a task, note or project from the floating action menu. Each choice adds a visible item to the workspace.

View and copy the complete example

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuSpeedDialComponent } from '@neural-ui/native/speed-dial';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuSpeedDialAction } from '@neural-ui/native/speed-dial';

@Component({
  selector: 'app-example',
  imports: [NeuCardComponent, NeuBadgeComponent, NeuSpeedDialComponent, View, Text, ScrollView],
  template: `
    <view class="dial-workspace"><view class="product-section"><text class="product-title" accessibilityRole="header">Your workspace</text><text class="product-caption">Projects, notes and the work in between</text></view>
    <scroll-view class="product-scroll"><view class="product-stack">@for (item of items(); track item.id) {
      <neu-card [title]="item.title" [description]="item.description" variant="outlined"><neu-badge [label]="item.kind" tone="neutral" /></neu-card>
    }</view></scroll-view>
    <view class="dial-footer"><neu-speed-dial label="Create" [actions]="actions" [(open)]="open" (activated)="onActivated($event)" /><text class="product-caption" accessibilityLiveRegion="polite">{{ items().length }} workspace items</text></view></view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
.dial-workspace { flex: 1; flex-shrink: 1; min-height: 0; gap: 20px; } .dial-footer { padding-top: 12px; gap: 12px; }
  `,
})
export class ExampleComponent {
  readonly actions: readonly NeuSpeedDialAction[] = [
    { id: 'task', label: 'New task', svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="m5 12 4 4L19 6"/></svg>' },
    { id: 'note', label: 'New note', svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M5 3h10l4 4v14H5Z M9 11h6M9 15h6"/></svg>' },
    { id: 'project', label: 'New project', svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M3 7V4h7l2 3h9v13H3Z"/></svg>' },
  ];
  readonly open = signal(false);
  readonly items = signal([{ id: 0, title: 'Review onboarding', kind: 'Task', description: 'Mobile launch · Today' }, { id: 1, title: 'Release notes', kind: 'Note', description: 'Product workspace' }]);
  onActivated(id: string): void {
    const kind = id === 'task' ? 'Task' : id === 'note' ? 'Note' : 'Project';
    const title = id === 'task' ? 'New task' : id === 'note' ? 'New note' : 'New project';
    this.items.update(items => [...items, { id: items.length, title, kind, description: 'Ready for your next idea' }]);
  }
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Speed Dial · android · native capture — **Android**Native screenshot

Speed Dial · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
label	string	'Quick actions'	Input	Human-readable name for the control, action or group.
actions	readonly NeuSpeedDialAction[]	[]	Input	Action definitions; the application handles the requested action ID.
disabled	boolean	false	Input	Disables user interaction. Values can still be supplied by the application.

Models

Name	Type	Default	Binding	Description
open	boolean	false	Model · two-way	Whether the presentation or message is requested to be open. Bind a writable signal with [(open)].

Outputs

Name	Payload	When it emits
openChange	boolean	Emits the updated open value. [(open)] binds this output together with its model input.
activated	string	Emits the activated item ID. Your application performs the action.

Model state

Bind the signal with [(modelName)] without calling it. Use modelName() to read its value.

model-fields.ts

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

// Fields inside your component class
readonly open = signal<boolean>(false);

Types and data interfaces

Use the imports in your application. The definitions below are provided for reference.

NeuSpeedDialAction

NeuSpeedDialAction.ts

import type { NeuSpeedDialAction } from '@neural-ui/native/speed-dial';
import type { NeuOption } from '@neural-ui/native';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuSpeedDialAction extends NeuOption {
    /** Optional SVG markup for the action's circular button. */
    readonly svg?: string;
}

Field	Type	Requirement	Meaning
svg	string	Optional	Optional SVG markup for the item icon. Nav displays it above the destination label; SpeedDial uses it inside the action circle and falls back to the label initial when absent.
id	string	Required	Stable, unique identifier used for tracking and selection.
label	string	Required	Human-readable item name.
description	string	Optional	Optional supporting text; rendering depends on the control.
disabled	boolean	Optional	Prevents activating or selecting this item.

NeuOption

NeuOption.ts

import type { NeuOption } from '@neural-ui/native';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuOption {
    readonly id: string;
    readonly label: string;
    readonly description?: string;
    readonly disabled?: boolean;
}

Field	Type	Requirement	Meaning
id	string	Required	Stable, unique identifier used for tracking and selection.
label	string	Required	Human-readable item name.
description	string	Optional	Optional supporting text; rendering depends on the control.
disabled	boolean	Optional	Prevents activating or selecting this item.