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 a button group for actions that are related to each other or to a single task, such as “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.

Join controls when they represent closely related peer actions with equal hierarchy. Icon-only actions must use a familiar symbol and have a concise, action-oriented accessible name.

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

Use the default size in most cases. Use the smallest size in compact toolbars and the largest size alongside prominent page introductions.

Related components

  • Button: To display an action with a visible label.
  • Icon button: To display a familiar icon-only action with an accessible name.
  • Link: To navigate to another page.
  • Hero: To introduce a page with a large heading, description, and actions.
  • CTA banner: To draw attention to or create urgency around an action.