1

How to change the material ui speeddial button, apparently it uses the Fab default and all you can do is to change the Icon, but I need to add a text as well, for example:

<Fab variant="extended">
    <NavigationIcon />
    Actions
</Fab>
TBAWG
  • 81
  • 6

2 Answers2

2
  1. Use SpeedDialAction for this purpose
    <SpeedDialAction
       key={action.name}
       icon={action.icon} // here goes your icon
       tooltipTitle={action.name} // here goes your text
       tooltipOpen
       onClick={handleClose}
    />

On hover you will see enter image description here

  1. Or use floating action button for your purpose
    <Fab
        aria-label={fab.label}
        className={fab.className}
        color={fab.color}
    >
        {fab.icon}
    </Fab>

enter image description here

Please, let me know if it works for you or not )

Kas Elvirov
  • 7,394
  • 4
  • 40
  • 62
  • 1
    That's not what he is looking for, seems like he want to have some primary text before opening the dial actions, I'm trying to do the same right now – guiwme5 Oct 02 '21 at 21:25
2

Sorry that this is late, but I recently ran into this problem and found the solution:

SpeedDial comes with FabProps prop to enable you to modify the Fab (Fab docs: https://mui.com/material-ui/api/fab/).
So firstly you should modify the Fab to use variant="extended". Then to add your text, use the icon prop from SpeedDialIcon.

So your component should look something like this:

<SpeedDial
  FabProps={{ variant: "extended" }}
  icon={
    <SpeedDialIcon
      icon={
        <Box sx={{ display: "flex" }}>
          <YourIcon />
          <Typography> {/* Your text */} </Typography>
        </Box>
    />
  }
/>
lettuce
  • 67
  • 7