ButtonGroup

View source on GitHub

ButtonGroup is used to display a series of buttons.

also known as Button Row, Action Bar

Figma:

Web:

iOS:

Android:

A11y:

Props

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

Accessibility

Accessibility not available

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>

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library	Ready	Component is available in Figma across all platforms.
Responsive Web	Ready	Component is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.

Edit page on GitHub