Skip to content
Change the site theme
Figma
(information)

Button Group

Design assets pending
Peer review pending

A Button Group displays a set of related actions.


Guidelines

Guidelines page anchor

A Button Group is a way to bring a set of 2-6 buttons together, often visually, that have related actions. The buttons should be independent from each other, i.e. clicking one button does not change the state of another button.

Any Paste components that use Button, including Popover, Modal, and Minimizable Dialog can be put into a ButtonGroup.

Button Group vs Radio Button Group

Button Group vs Radio Button Group page anchor

Button groups should be used to help bring together a group of related actions, rather than selecting from a set of options. Use a Radio Button Group to allow the user to select a single option from a group of mutually exclusive choices. Radio Buttons cannot be used within a Button Group.

By default, the Buttons in a Button Group are displayed horizontally with a margin between them.

Use the attached prop to make the buttons visually connected.

Use the icon variant when space is limited and the icons being used are easily recognizable (e.g., icons representing graph types). It is highly recommended to pair this variant with the Tooltip component to help ensure understandability.

Use a Menu to include more actions in the ButtonGroup, such as when there is limited space or there are more than 6 actions.

Button Groups:

  • Should have between 2–6 options
  • Are comprised of independent buttons
  • Labels should use sentence case

Installation

Installation page anchor
yarn add @twilio-paste/button-group - or - yarn add @twilio-paste/core
import {ButtonGroup} from '@twilio-paste/core/button-group';
import {Button} from '@twilio-paste/core/button';
const Component = () => (
<ButtonGroup attached>
<Button variant="primary">First button</Button>
<Button variant="secondary">Second button</Button>
<Button variant="destructive">Destructive button</Button>
</ButtonGroup>
);

All the valid HTML attributes for div are supported including the following props:

PropTypeDescriptionDefault
childrenReact.ReactElement[]The Buttons rendered in the ButtonGroup
attached?booleanIf the group of buttons are visually attachedfalse
element?stringOverrides the default element name to apply unique styles with the Customization Provider'BUTTON_GROUP'

Black lives matter.