I've recently faced with the similar issue. While designer can easily move components in Figma or w/e you are dependent on MUI realisation. In this case you need to manipulate over MuiSpeedDial-root, MuiSpeedDial-actions and MuiButtonBase-root to achieve desired results.
So for my case it looks like so:
const actions = [
{
icon: (
<Box display="flex" gap={1}>
<Typography fontSize={14}>{t('dashboard.selectDate')}</Typography>
<EventIcon />
</Box>
),
name: t('dashboard.selectDate'),
onClick: () => {
handleOpenDateModal();
handleClose();
}
},
{
icon: (
<Box display="flex" gap={1}>
<Typography fontSize={14}>{t('dashboard.today')}</Typography>
<CalendarTodayIcon />
</Box>
),
name: t('dashboard.today'),
onClick: () => {
handleSetMonth(getTodayIso());
handleClose();
}
},
{
icon: (
<Box display="flex" gap={1}>
<Typography fontSize={14}>{t('dashboard.navigation.uploadInvoice')}</Typography>
<UploadFileIcon />
</Box>
),
name: t('dashboard.navigation.uploadInvoice'),
onClick: () => navigate(`/${ROUTING.INVOICE_UPLOAD}`)
}
];
...
<StyledSpeedDial
ariaLabel="SpeedDial controlled"
icon={<SpeedDialIcon />}
onClose={handleClose}
onOpen={handleOpen}
open={open}
>
{actions.map((action) => (
<SpeedDialAction
TooltipClasses={{
tooltip: 'speed-action-tooltip-hide'
}}
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
onClick={action.onClick}
/>
))}
</StyledSpeedDial>
Styled components saved in separate file:
export const StyledSpeedDial = styled(SpeedDial)<SpeedDialProps>(({ theme }) => ({
position: 'absolute',
bottom: 20,
right: 16,
zIndex: 2500,
alignItems: 'end',
'& .MuiSpeedDial-actions': {
marginLeft: '-50px',
'& .MuiButtonBase-root': {
color: theme.colors.contrast,
height: '40px',
width: 'fit-content',
alignSelf: 'flex-end',
padding: '8px 16px',
borderRadius: '100px',
marginRight: 0,
'& .MuiBox-root': {
alignItems: 'center'
}
}
}
}));
Don't kick me too hard on those negative margins. That's what worked for me. And I had to override height and width this way, because it's the most convenient way to fit that text.
I didn't found out more elegant way, if you do, please let me know.
P.S. this is how it looks