Components

Button Group

A ButtonGroup gathers multiple buttons at once, providing them with the correct spacing depending on the context.

Examples

A simple example

<ButtonGroup>
  <Button variant="primary">One button</Button>
  <Button variant="secondary">Another button</Button>
</ButtonGroup>

A Button Group with the same size

<ButtonGroup size="lg">
  <Button variant="primary">One button</Button>
  <Button variant="secondary">Another button</Button>
</ButtonGroup>

A Button Group with same variant

<ButtonGroup variant="tertiary">
  <Button>One button</Button>
  <Button>Another button</Button>
</ButtonGroup>

A Button Group where the buttons are "stuck" to each other

<ButtonGroup isAttached={true}>
  <IconButton icon={<EditOutline18Icon />} aria-label="Edit" />
  <IconButton icon={<DeleteOutline18Icon />} aria-label="Delete" />
</ButtonGroup>