SpeedDial

A floating main button that expands a list of sub-actions, commonly used for quick actions like "New/Share"; aria-expanded stays in sync, clicking outside / Esc collapses it, with no orphan popups.

The demos add style="position: static" to avoid fixed positioning affecting the page layout; in real use it is fixed to the bottom-right by default. The expansion direction of the sub-actions is controlled by direction.

Expansion direction

direction supports up (default) / down / left / right; the first sub-action is always closest to the main button.

Directions: up / down / left / right

Example

Text-only actions

icon can be omitted to show only the label; icon-only actions (no label) are also supported.

Text only / icon only

Example

Events

Clicking the main button to expand/collapse fires oas-open (detail: { open }); clicking a sub-action fires oas-select (detail: { index, label }) and collapses automatically.

Event feedback

Example

Controlled open

The open attribute is controlled: setting/removing it externally expands/collapses, and the component's own clicks also sync the attribute and fire oas-open (clicking outside / Esc still collapses).

Controlled expansion

ExpandCollapseopen: false

Example

API

Attributes

Attribute	Description	Type	Default
actions	Sub-action JSON	string	[]
direction	Expansion direction	string	up
open	Expanded state (controlled)	boolean	—

Events

Event	Description
oas-open	Expanded/collapsed, detail: { open }
oas-select	A sub-action was selected, detail: { index, label }, then it collapses automatically

SpeedDialAction fields:

Field	Description	Type
label	Action text	string
icon	Icon name (a key of @oas-isui/icons iconRegistry)	string

Behavior: clicking the main button toggles expansion (aria-expanded synced); clicking outside or pressing Esc collapses (after Esc, focus returns to the main button); when expanded, the first sub-action is focused automatically. The default position is position: fixed; bottom/right, overridable. The document-level listener is only attached while expanded and disconnected during cleanup — no orphan popups.