Site settings
Change the appearance of the site to suit your preferences
Button Group
A ButtonGroup gathers multiple buttons at once, providing them with the correct spacing depending on the context.
A simple example
<ButtonGroup> <Button variant="primary">One button</Button> <Button variant="secondary">Another button</Button> </ButtonGroup>
A simple button group disabled
<ButtonGroup disabled> <Button>One button</Button> <Button>Another button</Button> </ButtonGroup>
A Button Group with the same size
<ButtonGroup> <Button variant="primary" size="lg">One button</Button> <Button variant="secondary" size="lg">Another button</Button> </ButtonGroup>
A Button Group with same variant
<ButtonGroup> <Button variant="tertiary">One button</Button> <Button variant="tertiary">Another button</Button> </ButtonGroup>
A Button group with same variant attached
<ButtonGroup attached> <Button>One button</Button> <Button>Another button</Button> </ButtonGroup>
A Button Group where the buttons are "stuck" to each other
<ButtonGroup attached={true}> <IconButton variant="primary" icon={< EditOutline18Icon />} aria-label="Edit" size="md" /> <IconButton variant="primary" icon={< DeleteOutline18Icon />} aria-label="Delete" size="md" /> </ButtonGroup>