Add padding between buttons

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>