---
title: Button group
description: Use the button group component to group related buttons together.
keywords: ['buttons', 'control', 'action', 'group', 'paired']
---

![An image showing a button group with a primary and a secondary button.](https://github.com/primer/brand/assets/6951037/3b8d5346-31d5-4820-baaf-056d9063f203)

## 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**

![](https://github.com/primer/brand/assets/6951037/c69ae38e-819b-4e03-9b92-665a479f188a)

_Use a primary button with a secondary button._

**❌ Don't**

![](https://github.com/primer/brand/assets/6951037/c4c5c0de-2a46-4dbb-802a-0a6739d31d3a)

_Don’t place multiple primary buttons together._

**✅ Do**

![](https://github.com/primer/brand/assets/6951037/9918ba9b-57ea-4a32-b51b-2460554900a9)

_Place the primary button at the beginning of a button group._

**❌ Don't**

![](https://github.com/primer/brand/assets/6951037/cb151d26-2597-45e7-b271-62d64c3c292d)

_Don't place the primary button at the end of a button group._

**✅ Do**

![](https://github.com/primer/brand/assets/6951037/97f95652-8802-418a-bf4b-7d9800c038fc)

_Stack the buttons vertically when there's not enough horizontal space._

**❌ Don't**

![](https://github.com/primer/brand/assets/6951037/ef165552-94e1-4377-a9db-d8e9355af4eb)

_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](../Button/index.md): To display an action with a visible label.
- [Icon button](../IconButton/index.md): To display a familiar icon-only action with an accessible name.
- Link: To navigate to another page.
- [Hero](../Hero/index.md): To introduce a page with a large heading, description, and actions.
- [CTA banner](../CTABanner/index.md): To draw attention to or create urgency around an action.