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

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

@using Lumeo

<SpeedDial />

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

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.

Bottom Left Position

This SpeedDial appears in the bottom-left corner.

Direction: Left

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

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".

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.