ButtonGroup

@coinbase/cds-web@8.21.3

Groups buttons with consistent spacing.

Import

import { ButtonGroup } from '@coinbase/cds-web/buttons/ButtonGroup'

SourceView source codeStorybookView StorybookFigmaView Figma (internal only)

---

Related components

• Button,
• IconButton

---

󰏖

View as Markdown

Basic Button Group

Uniformly group buttons with consistent spacing between each.

Loading...

󰙡

Live Code

<ButtonGroup accessibilityLabel="Group" direction="vertical">
  <Button>Save</Button>
  <Button variant="secondary">Cancel</Button>
  <Button variant="negative">Delete</Button>
</ButtonGroup>

The group is rather easy to use, just render a list of buttons. However, there is a hard requirement that direct children must be a Button or IconButton component. Do not provide your own markup.

Loading...

󰙡

Live Code

<ButtonGroup accessibilityLabel="Group">
  <Button>Save</Button>
  <Button transparent>Cancel</Button>
</ButtonGroup>

Block Button Group

If you would like the buttons to expand and fill all available space, pass a block prop to the ButtonGroup.

Loading...

󰙡

Live Code

<ButtonGroup block accessibilityLabel="Group">
  <Button>Save</Button>
  <Button variant="secondary">Cancel</Button>
</ButtonGroup>

If you are using a component that composes around a button component, be sure to pass props from the group down correctly, like block.

Icon buttons

Icon buttons are unique in that their shape is a circle, not a rectangle. Because of this, icon buttons do not support the block prop.

Loading...

󰙡

Live Code

<ButtonGroup accessibilityLabel="Group">
  <IconButton name="arrowLeft" />
  <IconButton name="arrowRight" />
</ButtonGroup>

A11y

All button groups require an accessibility label describing the group's contents.

<ButtonGroup accessibilityLabel="Asset actions">
  <Button>Buy</Button>
  <Button>Sell</Button>
  <Button variant="secondary">Add to watchlist</Button>
</ButtonGroup>