Speed Dial

Loading...

<flint-speed-dial-action>

A single action item inside a flint-speed-dial.

• Tag: <flint-speed-dial-action>
• Class: FlintSpeedDialAction

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintSpeedDialAction } from '@getufy/flint-ui';

Usage

<flint-speed-dial-action></flint-speed-dial-action>

Properties

Property	Attribute	Type	Default	Description
name	name	string	''	Programmatic identifier for this action, included in the click event detail.
tooltipTitle	tooltip-title	string	''	Tooltip text shown alongside the action and used as aria-label.
tooltipOpen	tooltip-open	boolean	false	Forces the tooltip to be visible regardless of hover state.
tooltipPlacement	tooltip-placement	'left' | 'right' | 'top' | 'bottom'	'left'	Tooltip placement relative to the action button.
disabled	disabled	boolean	false	If true, the action button is disabled.

Events

Event	Detail	Description
flint-speed-dial-action-click	—	Fired when the action button is clicked.

Slots

Name	Description
(default)	Icon content for the action button.

CSS Parts

Name	Description
button	The button element.
tooltip	The tooltip element.

CSS Custom Properties

Property	Default
--flint-speed-dial-action-size	—
--flint-speed-dial-action-gap	—
--flint-surface-1	—
--flint-text-color	—
--flint-surface-2	—
--flint-primary-color	—
--flint-tooltip-bg	—
--flint-tooltip-text-color	—
--flint-font-family	—
--flint-text-color-on-primary	—

---

<flint-speed-dial>

Speed Dial — a FAB that reveals 3-6 related actions when pressed.

• Tag: <flint-speed-dial>
• Class: FlintSpeedDial

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintSpeedDial } from '@getufy/flint-ui';

Usage

<flint-speed-dial></flint-speed-dial>

Properties

Property	Attribute	Type	Default	Description
open	open	boolean	false	Whether the speed dial is open (controlled).
defaultOpen	default-open	boolean	false	Initial open state for uncontrolled usage. Sets open once on first render.
direction	direction	'up' | 'down' | 'left' | 'right'	'up'	Direction in which actions expand from the FAB (default 'up').
hidden	hidden	boolean	false	Hides the entire speed dial component.
disabled	disabled	boolean	false	Disables the FAB and prevents opening.
persistentTooltips	persistent-tooltips	boolean	false	When true, tooltips on all actions are always visible (good for touch/a11y).
closeIcon	close-icon	string	''	Custom char/text rendered as the x close icon on the FAB. Falls back to built-in SVG.
ariaLabel	aria-label	string	'Speed dial'	ARIA label for the main FAB button.
isTouch	is-touch	boolean	false	True on touch-only devices (auto-detected unless explicitly set).

Events

Event	Detail	Description
flint-speed-dial-open	{ open: true }	Fired when the dial opens. detail: { open: true }
flint-speed-dial-close	{ open: false }	Fired when the dial closes. detail: { open: false }

Slots

Name	Description
(default)	flint-speed-dial-action elements.
icon	Icon shown on the FAB when closed (default: + SVG).
open-icon	Icon shown on the FAB when open (default: x SVG).

CSS Parts

Name	Description
actions	The actions container.
button	The FAB button element.

CSS Custom Properties

Property	Default
--flint-speed-dial-action-size	—
--flint-speed-dial-action-gap	—
--flint-speed-dial-size	—
--flint-speed-dial-bg	—
--flint-speed-dial-color	—
--flint-speed-dial-bg-hover	var(--flint-primary-color-hover

---