Skip to main content

Button group

Use the button group component to group related buttons together.

An image showing a button group with a primary and a secondary button.

Usage

Use button group to group a set of actions that are related between them or to a single application. E,g, “Log in” and “Sign up” or “Try it out” and “Learn more”.

Use button group to display a pair of primary and a secondary actions. The primary button is used for the main call to action while the secondary button is a related, less important action.

Do
Use a primary button with a secondary button.
Don’t
Don’t place multiple primary buttons together.
Do
Place the primary button at the beginning of a button group.
Don’t
Don’t place the primary button at the end of a button group.
Do
Stack the buttons vertically when there’s not enough horizontal space.
Don’t
Don’t stack the buttons horizontally when there’s not enough space to avoid text wrapping.

Options

Size

The button group component has two sizes: medium and large. The medium size should be used for most cases. The large size should be used when the button group is used in large headings that introduces a page, as in the Hero component.

Related components

  • Button: To display a button that performs an action.
  • Link: To display a link that navigates to another page.
  • Hero: To display a large heading and a description with a button group.
  • CTA banner: To draw attention to or create urgency around a user action.
Brand UI