---
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
```
---
## Hollow and clear
Buttons within a button group can be given hollow and clear styles individually by adding a class `.hollow` or `.clear` respectively.
```html_example
```
The entire group can also be given hollow or clear styles using the same class.
```html_example
```
---
## No Gaps
When using a single color for the button-group, you might want to remove the `1px` spacing between the buttons. You can use `no-gaps` to just the same.
```html_example
```
You can use `no-gaps` on `hollow` styles.
```html_example
```
You can use `no-gaps` with all grouped/individual styles.
```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
```
---
## Flexbox Button Group
The buttons in a button group can be positioned using the [Flexbox Utility](/sites/docs/flexbox-utilities.html#vanilla-flexbox-helper-classes) classes in Foundation. You can use `.align-center`, `.align-right`, `.align-spaced`, or `.align-justify`.
```html_example
```
