# Speed Dial

Source: https://lumeo.nativ.sh/components/speed-dial

# Speed Dial

A floating action button that expands into a set of related actions — ideal for mobile-first UIs and dashboard quick-access menus.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<SpeedDial />

## When to Use

-   Floating action buttons (FABs) that expand into related quick actions
-   Mobile-first UIs where a persistent action button is needed
-   Dashboard quick-access menus for creating or performing common tasks
-   Any interface where multiple related actions should be accessible from a single trigger

Preview Code

Basic Speed Dial (Bottom Right)

Fixed Positioning

SpeedDial renders as a fixed-position element. Click the + button in the bottom-right corner of this page to see the demo in action.

Preview Code

Bottom Left Position

This SpeedDial appears in the bottom-left corner.

Preview Code

Direction: Left

Actions expand to the left from a top-right anchor.

## API Reference

### SpeedDial

Property

Type

Default

Description

Items

List<SpeedDialItem>

\[\]

The action items to show when the dial is expanded.

Position

SpeedDialPosition

BottomRight

Corner position: BottomRight, BottomLeft, TopRight, TopLeft.

Direction

SpeedDialDirection

Up

Direction the actions expand: Up, Down, Left, Right.

Icon

string?

—

Custom icon for the main trigger button (emoji/text).

Variant

string

"default"

Visual style. Values: "default", "linear", "circular".

### SpeedDialItem

Property

Type

Description

Label

string

Tooltip label shown beside the action button.

Icon

string?

Emoji or text icon inside the action button.

OnClick

EventCallback

Fired when the action button is clicked.

Disabled

bool

Disable this action item.

## Related Components

-   [Button](/components/button) — Standard button for individual actions
-   [DropdownMenu](/components/dropdown-menu) — Dropdown menu for inline action lists
-   [Tooltip](/components/tooltip) — Tooltip labels shown alongside speed dial action buttons