Button Group

Props

NameTypeDescription
children
unionOne or more Buttons
flex
bool
wide
boolShould this span the full width of the parent?
spacing
boolShould there be spacing between the child buttons?
reverse
boolReverses the order of child buttons
align
enumX Alignment of the buttons ('left' | 'center' | 'right')

Button Group

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

In reversed order

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

Alignment

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