Skip to content
Edit this page

Speed Dial

When pressed, a floating action button can display three to six related actions in the form of a speed dial.

If more than six actions are needed, something other than a FAB should be used to present them.

Simple Speed Dial

The floating action button can display related actions.

Direction

Custom close icon

You can provide an alternate icon for the closed and open states using the icon and openIcon props of the SpeedDialIcon component.

<Button onClick={handleVisibility}>Toggle Speed Dial</Button>
<SpeedDial
  ariaLabel="SpeedDial openIcon example"
  className={classes.speedDial}
  hidden={hidden}
  icon={<SpeedDialIcon openIcon={<EditIcon />} />}
  onClose={handleClose}
  onOpen={handleOpen}
  open={open}
>
  {actions.map(action => (
    <SpeedDialAction
      key={action.name}
      icon={action.icon}
      tooltipTitle={action.name}
      onClick={handleClose}
    />
  ))}
</SpeedDial>

Persistent action tooltips

The SpeedDialActions tooltips can be be displayed persistently so that users don't have to long-press in order to see the tooltip on touch devices.

It is enabled here across all devices for demo purposes, but in production it could use the isTouch logic to conditionally set the property.

API