Skip to main content
Version: 4.0.0-beta.0

SpeedDial

When pressed, a floating action button can display three to six related actions in the form of a speed dial.

If more than six actions are needed, something other than a FAB should be used to present them.

Upon press, the FAB remains visible and emits a stack of related actions.

If the FAB is tapped in this state, it should either initiate its default action or close the speed dial actions.

Components

Usage


Props

SpeedDial

SpeedDial.Action

None

Reference

SpeedDial

backdropPressableProps

Props for Backdrop Pressable

TypeDefault
PressablePropsNone

children

SpeedDial Action as children.

TypeDefault
any[] and ReactNodeNone

isOpen

Opens the action stack.

TypeDefault
booleanNone

onClose

Callback fired when the component requests to be closed.

TypeDefault
FunctionFunction

onOpen

Callback fired when the component requests to be open.

TypeDefault
FunctionFunction

openIcon

Icon shown on FAB when action stack is open.

TypeDefault
anyNone

overlayColor

Add overlay color to the speed dial.

TypeDefault
stringNone

transitionDuration

The duration for the transition, in milliseconds.

TypeDefault
number150

SpeedDial.Action

None