Package LumeoA11yfocus-managedkeyboardmenumenuitemDepends ontooltipTested Tier 3 · 16 tests View source ↗

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 />

Tested Tier 3 · A11y + behavior

Render Behavior A11y Keyboard Scale E2E

16 tests across 5 files. Auto-generated from the test suite.

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.

Custom Trigger Icon & Variant

A top-left dial with a custom trigger icon and the secondary color variant.

Prop	Type	Default	Description
Items	List<SpeedDialItem>	new()	The actions revealed when the dial opens, rendered as a menu of buttons with the item's label as an accessible name and a hover/focus tooltip.
Icon	string?	—	Optional trigger icon override (text/emoji, like Icon). When unset, a Lucide plus icon that rotates into an × while open is rendered.
Position	SpeedDialPosition	SpeedDialPosition.BottomRight	Fixed-viewport corner the dial anchors to. Defaults to BottomRight.
Direction	SpeedDialDirection	SpeedDialDirection.Up	Direction the action menu fans out from the trigger. Also determines the menu's ARIA orientation (vertical for Up/Down, horizontal for Left/Right). Defaults to Up.
Variant	string	"Default"	Trigger color variant following the Button variant names: "Default" (primary), "Secondary", "Destructive", "Outline", "Ghost".
Disabled	bool	false	When true, the trigger cannot be activated; an already-open menu is closed immediately so it can't be left trapped open.
Class	string?	—	Additional CSS classes merged onto the root wrapper.
AdditionalAttributes	Dictionary<string, object>?	—	Captures any unmatched attributes and applies them to the root wrapper.

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.