SpeedDial API
API documentation for the React SpeedDial component. Learn about the available props and the CSS API.
Import
import SpeedDial from '@mui/material/SpeedDial';
// or
import { SpeedDial } from '@mui/material';Component name
The nameMuiSpeedDial can be used when providing default props or style overrides in the theme.Props
Props of the native component are also available.
| 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. | |
| 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 | 'down' | 'left' | 'right' | 'up' | 'up' | The direction the actions open relative to the floating action button. |
| FabProps | object | {} | Props applied to the Fab element. |
| hidden | bool | false | If true, the SpeedDial is hidden. |
| icon | node | The icon to display in the SpeedDial Fab. The SpeedDialIcon component provides a default Icon with animation. | |
| onClose | func | Callback fired when the component requests to be closed. Signature: function(event: object, reason: string) => voidevent: The event source of the callback. reason: Can be: "toggle", "blur", "mouseLeave", "escapeKeyDown". | |
| onOpen | func | Callback fired when the component requests to be open. Signature: function(event: object, reason: string) => voidevent: The event source of the callback. reason: Can be: "toggle", "focus", "mouseEnter". | |
| open | bool | false | If true, the component is shown. |
| openIcon | node | The icon to display in the SpeedDial Fab when the SpeedDial is open. | |
| sx | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
| TransitionComponent | elementType | Zoom | The component used for the transition. Follow this guide to learn more about the requirements for this component. |
| transitionDuration | number | { appear?: 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 | Props applied to the transition element. By default, the element is based on this Transition component. |
The
ref is forwarded to the root element.CSS
| Rule name | Global class | Description |
|---|---|---|
| root | .MuiSpeedDial-root | Styles applied to the root element. |
| fab | .MuiSpeedDial-fab | Styles applied to the Fab component. |
| directionUp | .MuiSpeedDial-directionUp | Styles applied to the root element if direction="up" |
| directionDown | .MuiSpeedDial-directionDown | Styles applied to the root element if direction="down" |
| directionLeft | .MuiSpeedDial-directionLeft | Styles applied to the root element if direction="left" |
| directionRight | .MuiSpeedDial-directionRight | Styles applied to the root element if direction="right" |
| actions | .MuiSpeedDial-actions | Styles applied to the actions (`children` wrapper) element. |
| actionsClosed | .MuiSpeedDial-actionsClosed | Styles applied to the actions (`children` wrapper) element if open={false}. |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.