React Bootstrap ButtonToolbar Not Spacing Buttons Apart

Question

I'm having a problem keeping two buttons apart using the ButtonToolbar component in react-bootstrap. I would like these two buttons to be spaced apart, but I'm not sure what I need to do with the styling. According to the documentation, what I have done should be sufficient.

I've tried changing the className of ButtonToolbar to justify-content-between but that separates the buttons to both ends of the column.

          <ButtonToolbar style={{ marginTop: "17.5px" , }}>
            <Button
              size="sm"
              onClick={() => {
                setUndoPlayToggle(!undoPlayToggle);
                setPauseVariable(true);
              }}
              disabled={pitchStateLogs.length === 0}
            >
              Undo Play
            </Button>
            <Button size="sm">View Stats</Button>
          </ButtonToolbar>

Answer 1

You would simply add a class margin (mr-2) to the left button:

Or pick any bootrap margin of your choice from 0 to 5:

<ButtonToolbar style={{ marginTop: "17.5px" }}>
  <Button
    size="sm"
    className="mr-2"
    onClick={() => {
      setUndoPlayToggle(!undoPlayToggle);
      setPauseVariable(true);
    }}
    disabled={pitchStateLogs.length === 0}
  >
    Undo Play
  </Button>
  <Button size="sm">View Stats</Button>
</ButtonToolbar>;

Live working example: