Skip to content
Edit this page

SpeedDialAction API

API reference docs for the React SpeedDialAction component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import SpeedDialAction from '@mui/material/SpeedDialAction';
// or
import { SpeedDialAction } from '@mui/material';
Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the Tooltip component are also available.

classes

Override or extend the styles applied to the component.

Type:

object
delay

Adds a transition delay, to allow a series of SpeedDialActions to be animated.

Type:

number

Default:

0
FabProps

Props applied to the Fab component.

Type:

object

Default:

{}
icon

The icon to display in the SpeedDial Fab.

Type:

node
id

This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id.

Type:

string
open

If true, the component is shown.

Type:

bool
sx

The system prop that allows defining system overrides as well as additional CSS styles.

Type:

Array<func | object | bool> | func | object
TooltipClasses

classes prop applied to the Tooltip element.

Type:

object
tooltipOpen

Make the tooltip always visible when the SpeedDial is open.

Type:

bool

Default:

false
tooltipPlacement

Placement of the tooltip.

Type:

'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'

Default:

'left'
tooltipTitle

Label to display in the tooltip.

Type:

node
The ref is forwarded to the root element.

Inheritance

While not explicitly documented above, the props of the Tooltip component are also available in SpeedDialAction. You can take advantage of this to target nested components.

Theme default props

You can use MuiSpeedDialAction to change the default props of this component with the theme.

CSS

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.

.MuiSpeedDialAction-fabfab

Styles applied to the Fab component.

.MuiSpeedDialAction-fabClosedfabClosed

Styles applied to the Fab component if open={false}.

.MuiSpeedDialAction-staticTooltipstaticTooltip

Styles applied to the root element if tooltipOpen={true}.

.MuiSpeedDialAction-staticTooltipClosedstaticTooltipClosed

Styles applied to the root element if tooltipOpen={true} and open={false}.

.MuiSpeedDialAction-staticTooltipLabelstaticTooltipLabel

Styles applied to the static tooltip label if tooltipOpen={true}.

.MuiSpeedDialAction-tooltipPlacementLefttooltipPlacementLeft

Styles applied to the root element if tooltipOpen={true} and `tooltipPlacement="left"``

.MuiSpeedDialAction-tooltipPlacementRighttooltipPlacementRight

Styles applied to the root element if tooltipOpen={true} and `tooltipPlacement="right"``

You can override the style of the component using one of these customization options: