How to make spaces between two button in material ui?

Question

I'm trying take my UPDATE and DELETE button to the same row.It comes.But there is no space between those two buttons.

              <Button className={clsx(classes.button)}
                type="submit"
                variant="contained">
                {'Update'}
              </Button>

              <Button className={clsx(classes.button)}
                type="submit"
                variant="contained">
                {'Delete'}
              </Button>   
            </div>

How could i fix this?

Answer 1

You need Material UI Box Component for this with display="flex" and justifyContent="space-between". This adds space between elements horizontally.

<Box display="flex" justifyContent="space-between">
  <Button className={clsx(classes.button)}
            type="submit"
            variant="contained">
            {'Update'}
          </Button>

          <Button className={clsx(classes.button)}
            type="submit"
            variant="contained">
            {'Delete'}
          </Button>   
</Box>