The Speed Dial component is a useful way to preserve screen space and efficiently show action options. The Speed Dial size, color, hover, and other styles can be customized by targeting the proper nested selectors with the sx
prop.
In this post I will fork the Basic Speed Dial example from the MUI docs, and add styling to it. I also changed the background color and size of the speed dial “actions”. Here’s what we will create:

Full code is in the Resources section.
Speed Dial Size
The Speed Dial usually is shown as a circle, so you’ll want the height and width to be equal. The circle is known as a Floating Action Button, so we will see some default classes like MuiFab-root
and MuiFab-primary
. These can be useful as nested selectors.
If you want the primary FAB (button) and all the action FABs to have the same size and styling, create a nested selector that targets MuiFab-root
. If you want different styling for the primary Speed Dial FAB, target MuiFab-primary
. In my tutorial I target the primary class.

Here’s the code for setting the height and width of the Speed Dial. Notice the space between the &
and the FAB class. This means MUIFab-primary
is on a child element of the root:
<SpeedDial
sx={{ '& .MuiFab-primary': { width: 80, height: 80 } }}
/>
If you want to increase the icon size, target the MuiSpeedDialIcon-icon
class with a nested selector inside the MuiFab-primary
selector:
<SpeedDial
sx={{ '& .MuiFab-primary': { '& .MuiSpeedDialIcon-icon': { fontSize: 30 } } }}
/>
Speed Dial Color
Speed Dial color can be cutomized by targeting either the MuiFab-root
child or the MuiFab-primary
child. Just like with size, target the primary class if you only want to styling applied to the ‘primary’ Button that is always visible.
<SpeedDial
sx={{ '& .MuiFab-primary': { backgroundColor: 'gold', color: 'blue' } }}
/>
The color
value will style the icon in the primary Speed Dial Button, while backgroundColor
will fill the circle.
We can’t target background color at the root level because this will fill in a containing div that controls placement of the Speed Dial primary button.
Speed Dial Hover
We can change the hover styling by adding a hover selector. There are a couple different syntax options, but I like the below because it makes it easy to add non-hover styling and hover styling at the same time.
Notice there is no space between the &
and the MuiFab-primary
class. This means they are both selecting on the same element.
<SpeedDial
sx={{ '& .MuiFab-primary': { '&:hover': {backgroundColor: 'yellow'} } }}
/>
Speed Dial Action Size, Color and More Styles
The SpeedDialAction components are children of the SpeedDial in the JSX code. The individual actions can have CSS values passed to their sx
prop.
Here’s an example with width, height, and background color:
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
sx={{width: 50, height: 50, backgroundColor: 'lightblue'}}
/>
All the usual CSS values can be passed. If you want the icon or text to be larger, increase font size. If you want the icon or text to have color, pass a color
value.
We can render text instead of an icon in SpeedDialAction by passing text to the icon
prop.
Resources
Check out these related MUI posts:
- The Ultimate Guide to the Material-UI Snackbar
- How to Style the MUI Badge: Background Color, Centering, and Size
- The Essential Guide to Material-UI Icon Color
Here is the full code for this tutorial:
import Box from '@mui/material/Box';
import SpeedDial from '@mui/material/SpeedDial';
import SpeedDialIcon from '@mui/material/SpeedDialIcon';
import SpeedDialAction from '@mui/material/SpeedDialAction';
import CheckIcon from '@mui/icons-material/Check';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import ThumbUpIcon from '@mui/icons-material/ThumbUp';
const actions = [
{ icon: 'TEST', name: 'Text' },
{ icon: <CheckIcon />, name: 'Check' },
{ icon: <ErrorOutlineIcon />, name: 'Error' },
{ icon: <ThumbUpIcon />, name: 'Share' },
];
const actionSize = {
width: 50,
height: 50,
backgroundColor: 'lightblue'
}
export default function CustomSpeedDial() {
return (
<Box sx={{ height: 320, transform: 'translateZ(0px)', width: '100%' }}>
<SpeedDial
ariaLabel="Custom SpeedDial example"
sx={{ position: 'absolute', bottom: 16, right: 16, '& .MuiFab-primary': { backgroundColor: 'gold', color: 'blue', width: 80, height: 80, '& .MuiSpeedDialIcon-icon': { fontSize: 30 }, '&:hover': {backgroundColor: 'yellow'} } }}
icon={<SpeedDialIcon />}
>
{actions.map((action) => (
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
sx={actionSize}
/>
))}
</SpeedDial>
</Box>
);
}