SpeedDial

Open in Playground

A floating action button that fans out related actions. It opens on hover, on click and from the keyboard, and closes on outside click, Escape and after an action runs. direction (up, down, left, right) picks where the actions appear, shape="circle" makes every button round, and position fixes the whole control to a corner of the viewport.

Each action needs a label: it is the tooltip and the accessible name. showLabels writes the labels beside the actions instead. Pass icon and openIcon to change the main button, and color (a variant name or any CSS color) to recolor it.

Last action: nothing yet

Props

SpeedDial

actionsSpeedDialAction[]
The actions; label is the tooltip and accessible name. See the SpeedDialAction table below.
iconReactNode
Default: plus icon
Icon of the main button.
openIconReactNode
Default: close icon
Icon of the main button while open.
labelstring
Default: 'Actions'
Accessible name of the main button.
direction'up' | 'down' | 'left' | 'right'
Default: 'up'
Which way the actions fan out.
size'sm' | 'md' | 'lg'
Default: 'md'
Size of the main button.
shape'square' | 'circle'
Default: 'square'
Square corners or round buttons; the actions follow the main button.
variant'default' | 'secondary' | 'flat' | 'success' | 'danger' | 'warning'
Default: 'default'
Style of the main button.
color'default' | 'secondary' | 'flat' | 'success' | 'danger' | 'warning' | string
Color of the main button: a variant name or any CSS color; overrides variant.
position'bottom-right' | 'bottom-left' | 'top-right' | ...
Fix the control to a corner of the viewport.
showLabelsboolean
Default: false
Write each action label beside it instead of a tooltip.
openboolean
Open state (controlled).
defaultOpenboolean
Default: false
Initial open state when uncontrolled.
onOpenChange(open: boolean) => void
Called when it opens or closes.
hiddenboolean
Default: false
Hide the whole control.
classNamestring
Default: ''
Extra classes for the root element.

SpeedDial props
Prop	Type	Default	Description
`actions`	SpeedDialAction[]	–	The actions; `label` is the tooltip and accessible name. See the SpeedDialAction table below.
`icon`	ReactNode	`plus icon`	Icon of the main button.
`openIcon`	ReactNode	`close icon`	Icon of the main button while open.
`label`	string	`'Actions'`	Accessible name of the main button.
`direction`	'up' \| 'down' \| 'left' \| 'right'	`'up'`	Which way the actions fan out.
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Size of the main button.
`shape`	'square' \| 'circle'	`'square'`	Square corners or round buttons; the actions follow the main button.
`variant`	'default' \| 'secondary' \| 'flat' \| 'success' \| 'danger' \| 'warning'	`'default'`	Style of the main button.
`color`	'default' \| 'secondary' \| 'flat' \| 'success' \| 'danger' \| 'warning' \| string	–	Color of the main button: a variant name or any CSS color; overrides `variant`.
`position`	'bottom-right' \| 'bottom-left' \| 'top-right' \| ...	–	Fix the control to a corner of the viewport.
`showLabels`	boolean	`false`	Write each action label beside it instead of a tooltip.
`open`	boolean	–	Open state (controlled).
`defaultOpen`	boolean	`false`	Initial open state when uncontrolled.
`onOpenChange`	(open: boolean) => void	–	Called when it opens or closes.
`hidden`	boolean	`false`	Hide the whole control.
`className`	string	`''`	Extra classes for the root element.

SpeedDialAction

keystring
Unique key of the action.
iconReactNode
The action's icon.
labelstring
Its name: shown in a tooltip (or beside it with showLabels) and used as the accessible name.
disabledboolean
Default: false
Dim the action and ignore it.
onClick() => void
Called when the action is chosen.

SpeedDialAction props
Prop	Type	Default	Description
`key`	string	–	Unique key of the action.
`icon`	ReactNode	–	The action's icon.
`label`	string	–	Its name: shown in a tooltip (or beside it with showLabels) and used as the accessible name.
`disabled`	boolean	`false`	Dim the action and ignore it.
`onClick`	() => void	–	Called when the action is chosen.