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

![](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

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](../Hero/index.md) component.

## Related components

- [Button](../Button/index.md): To display a button that performs an action.
- Link: To display a link that navigates to another page.
- [Hero](../Hero/index.md): To display a large heading and a description with a button group.
- [CTA banner](../CTABanner/index.md): To draw attention to or create urgency around a user action.