Speed Dial

A floating action button can display related actions in a speed dial. Clicking the FAB reveals a set of action buttons.

Basic (Up)

<me-speed-dial aria-label="Speed dial"> <me-speed-dial-action tooltip-title="Copy"> <svg ...></svg> </me-speed-dial-action> <me-speed-dial-action tooltip-title="Print"> <svg ...></svg> </me-speed-dial-action> </me-speed-dial>

Direction

Down

Left

Right

<me-speed-dial direction="up">...</me-speed-dial> <me-speed-dial direction="down">...</me-speed-dial> <me-speed-dial direction="left">...</me-speed-dial> <me-speed-dial direction="right">...</me-speed-dial>

API — SpeedDial

Attribute	Type	Default	Description
`open`	boolean	false	Whether the speed dial is open.
`direction`	up \| down \| left \| right	up	Direction actions expand.
`aria-label`	string	—	Accessible label for the FAB button.

API — SpeedDialAction

Attribute	Type	Description
`tooltip-title`	string	Tooltip label shown on hover.
`disabled`	boolean	Disables the action button.

Events

Event	Description
`me-open-change`	Fired when the open state changes. `detail.open` is the new state.
`me-click`	Fired on SpeedDialAction when the action is clicked.