---
title: Button Group
description: Button groups are containers for related action items. They're great when you need to display a group of actions in a bar. These build off the button styles and work perfectly with the grid.
video: PRjMAuvwX44
sass: scss/components/_button-group.scss
tags:
- split button
flexbox: true
---
## Basics
Add the `.button-group` class to a container, and inside it place any number of buttons. The buttons are separated by a small border.
Watch this part in video
```html_example
```
---
## Sizing
Button groups can be sized with the same classes as standard buttons: `.tiny`, `.small`, and `.large`.
Watch this part in video
```html_example
```
---
## Coloring
Buttons within a button group can be colored individually with the `.secondary`, `.success`, `.warning`, and `.alert` classes.
Watch this part in video
```html_example
```
The entire group can also be colored using the same classes.
```html_example
```
---
## Even-width Group
Add the `.expanded` class to the container to make a full-width button group. Each item will automatically size itself based on how many buttons there are, up to a maximum of six.
Watch this part in video
```html_example
```
---
## Stacking
A button group can be made vertical with the `.stacked` class. You can also use `.stacked-for-small` to only stack a button group on small screens, or `.stacked-for-medium` to only stack on small and medium screens.
Watch this part in video
```html_example
```
---
## Split Buttons
To build a split button, just create a button group with two buttons.
To create a button with only an arrow, add the class `.arrow-only`. Note that the button still needs a label for screen readers, which can be embedded inside the button with a `.show-for-sr` element. In the example below, an assistive device will read the arrow button as "Show menu".
Watch this part in video
```html_example
```
