ButtonGroup

ButtonGroup is used to display a series of buttons.

Props

Component props
Name	Type	Default
`children`	`React.Node`	-
	One or more Buttons and/or IconButtons.

Usage guidelines

When to use

Arranging a group of buttons in a horizontal or vertical stack due to limited space.
Showing all the available options at one glance.

When not to use

Grouping 4 or more actions, consider using an ellipses IconButton after 3 options.
Switching between different views. Use SegmentedControl instead.

Example

<ButtonGroup>
  <Button text="Button 1" />
  <Button text="Button 2" />
</ButtonGroup>

<ButtonGroup>
  <Button text="Button 1" />
  <Button text="Button 2" />
</ButtonGroup>

Wrap

When buttons don't fit within the container, they will automatically wrap to the next line.

<Box width={150} borderStyle="sm">
  <ButtonGroup>
    <Button text="Button 1" />
    <Button text="Button 2" />
    <Button text="Button 3" />
  </ButtonGroup>
</Box>

<Box width={150} borderStyle="sm">
  <ButtonGroup>
    <Button text="Button 1" />
    <Button text="Button 2" />
    <Button text="Button 3" />
  </ButtonGroup>
</Box>

Edit page on GitHub