Add padding between buttons - reactjs

Question

I'm interested how I can add space between these buttons:
<Box pb={2}>
<Grid
container
direction="row"
justifyContent="space-between"
alignItems="baseline"
>
<Grid item>
<Typography variant="h4">
Tickets
</Typography>
</Grid>
<Grid item>
<Box component="span">
<Button sx={{ p: 2 }}
variant="contained"
color="primary"
size="small"
startIcon={<SaveIcon />}
>
Open Ticket
</Button>
<Button sx={{ p: 2 }}
variant="contained"
color="primary"
size="small"
startIcon={<SaveIcon />}
>
Export
</Button>
</Box>
</Grid>
</Grid>
</Box>
I tried to add:
<Box bgcolor="red" display="inline-block">
<Button sx={{ m: 2 }} variant="contained">
margin
</Button>
</Box>
But looks like I need to add some configuration to main container between space is not applied. Do you know what is the proper way to add space between buttons?

Answer 1

you can use spacing.the space between the type item component. It can only be used on a type container component. (Grid API)
if you want to use material-ui Grid props you should put each button in separated Grid item.
its looks like this:
<Box pb={2}>
<Grid
container
spacing={2}
direction="row"
justifyContent="space-between"
alignItems="baseline"
>
<Grid item>
<Typography variant="h4">
Tickets
</Typography>
</Grid>
<Grid item>
<Box component="span">
<Button sx={{ p: 2 }}
variant="contained"
color="primary"
size="small"
startIcon={<SaveIcon />}
>
Open Ticket
</Button>
</Box>
</Grid>
<Grid item>
<Box component="span">
<Button sx={{ p: 2 }}
variant="contained"
color="primary"
size="small"
startIcon={<SaveIcon />}
>
Export
</Button>
</Box>
</Grid>
</Grid>
</Box>