Skip to content

SpeedDialAction API

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

Component demos

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.

See CSS API below for more details.

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.

See the `sx` page for more details.

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 classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

.MuiSpeedDialAction-fab

Styles applied to the Fab component.

Rule name:fab

.MuiSpeedDialAction-fabClosed

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

Rule name:fabClosed

.MuiSpeedDialAction-staticTooltip

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

Rule name:staticTooltip

.MuiSpeedDialAction-staticTooltipClosed

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

Rule name:staticTooltipClosed

.MuiSpeedDialAction-staticTooltipLabel

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

Rule name:staticTooltipLabel

.MuiSpeedDialAction-tooltipPlacementLeft

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

Rule name:tooltipPlacementLeft

.MuiSpeedDialAction-tooltipPlacementRight

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

Rule name:tooltipPlacementRight


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