Button Group

Button Group

A wrapping component to manage spacing and border radius between child buttons
<ButtonGroup> <WithTheme(Button) subdued={true} variant="tertiary" > <Checkbox /> </WithTheme(Button)> <WithTheme(Button) variant="tertiary"> Freelancers </WithTheme(Button)> <WithTheme(Button) variant="tertiary"> Tasks </WithTheme(Button)> </ButtonGroup>

In reversed order

Child buttons can have their order reversed
<ButtonGroup reverse={true}> <WithTheme(Button) subdued={true} variant="tertiary" > <Checkbox /> </WithTheme(Button)> <WithTheme(Button) variant="tertiary"> Freelancers </WithTheme(Button)> <WithTheme(Button) variant="tertiary"> Tasks </WithTheme(Button)> </ButtonGroup>

Alignment

Buttons can be aligned left, center, or right. Most button groups should be aligned right
<ButtonGroup align="right" spacing={true} > <WithTheme(Button) variant="tertiary"> Cancel </WithTheme(Button)> <WithTheme(Button) variant="primary"> Create Project </WithTheme(Button)> </ButtonGroup>