Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-speed-dial-action>
A single action within a lit-material-speed-dial — a small (mini-FAB
sized) icon button with an optional visible label. Purely presentational:
it has no click handler of its own (a native disabled button already
never fires click at all) — the parent speed dial listens for the
bubbling click (the same event.composedPath() delegation
lit-material-select and lit-material-menu use) to close itself, the
same way lit-material-menu closes on an item click without that item
needing to know it's inside a menu at all.
Properties
Property
Attribute
Type
Default
Description
disabled
disabled
boolean
false
label
label
string
""
The visible pill's fallback text and the button's accessible name — see the class doc.
Slots
Slot
Description
icon
The action's icon.
label
Optional visible label, shown as a pill beside the icon.
CSS parts
Part
Description
action
The icon button.
label
The label pill.
ripple
The state-layer element the hover/press feedback is drawn on.
focus-ring
The focus indicator element.
<lit-material-speed-dial>
A FAB that expands into a column of lit-material-speed-dial-action
items — built on the native Popover API for the actions list (top-layer
rendering, light dismiss on outside click/Escape all come from the
browser), the same foundation lit-material-menu uses.
Properties
Property
Attribute
Type
Default
Description
open
open
boolean
false
direction
direction
SpeedDialDirection
"up"
disabled
disabled
boolean
false
label
label
string
"Actions"
The trigger's accessible name — required, since it's an icon-only button.
Events
Event
Description
close
Fires after the speed dial closes, for any reason (an action's activation, close(), Escape, or an outside click).