SpeedDial

The API documentation of the SpeedDial React component.

Props

Name	Type	Default	Description
ariaLabel *	string		The aria-label of the `Button` element. Also used to provide the `id` for the `SpeedDial` element and its children.
ButtonProps	object		Properties applied to the `Button` element.
children *	node		SpeedDialActions to display when the SpeedDial is `open`.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
direction	enum: 'up' \| 'down' \| 'left' \| 'right'	'up'	The direction the actions open relative to the floating action button.
hidden	bool	false	If `true`, the SpeedDial will be hidden.
icon *	element		The icon to display in the SpeedDial Floating Action Button. The `SpeedDialIcon` component provides a default Icon with animation.
onClose	func		Callback fired when the component requests to be closed. Signature: `function(event: object, key: string) => void` event: The event source of the callback key: The key pressed
open *	bool		If `true`, the SpeedDial is open.
openIcon	node		The icon to display in the SpeedDial Floating Action Button when the SpeedDial is open.
TransitionComponent	union: string \| func	Zoom	Transition component.
transitionDuration	union: number \| { enter?: number, exit?: number }	{ enter: duration.enteringScreen, exit: duration.leavingScreen,}	The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
TransitionProps	object		Properties applied to the `Transition` element.

Any other properties supplied will be spread to the root element (native element).

You can override all the class names injected by Material-UI thanks to the classes property. This property accepts the following keys:

Name	Description
root	Styles applied to the root element.
fab	Styles applied to the Button component.
directionUp	Styles applied to the root and action container elements when direction="up"
directionDown	Styles applied to the root and action container elements when direction="down"
directionLeft	Styles applied to the root and action container elements when direction="left"
directionRight	Styles applied to the root and action container elements when direction="right"
actions	Styles applied to the actions (`children` wrapper) element.
actionsClosed	Styles applied to the actions (`children` wrapper) element if `open={false}`.

If using the overrides key of the theme as documented here, you need to use the following style sheet name: MuiSpeedDial.