---
title: Button Groups
---
***
{{> examples_button_group_basic}}
***
Basic
You can create a button group using minimal markup.
HTML
{{> examples_button_group_basic_rendered}}
Rendered HTML
{{> examples_button_group_basic}}
***
Advanced
Additional classes can be added to your button group to change its appearance.
HTML
{{#markdown}}
```html
```
{{/markdown}}
Rendered HTML
#### Stacking
You can change the orientation of a button group with the `stack` classes.
`stack`: Stacks buttons vertically.
`stack-for-small`: Stacks buttons vertically on small screens and horizontally on large screens
{{#markdown}}
```html
```
{{/markdown}}
***
## Button Bars
A button bar is a group of button groups, perfect for situations where you want groups of actions that are all related to a similar element or page. Simply wrap two or more button groups in a `.button-bar` and Foundation takes care of the rest.
Basic
You can create a button bar using minimal markup.
HTML
{{> examples_button_group_bar}}
Rendered HTML
{{> examples_button_group_bar_rendered}}
Advanced
Additional classes can be added to your button bar to change its appearance.
HTML
{{> examples_button_group_bar_advanced}}
Rendered HTML
{{> examples_button_group_bar_advanced_rendered}}
***
## Customize with Sass
Button bars can be easily customized using our provided Sass variables.
SCSS
{{> examples_button_group_variables}}
***
## Semantic Markup With Sass
You can use our mixins to use button groups on your own markup.
Basic
You can use the `button-group-container()` and `button-group-style()` mixins to create your own button groups and button bars with semantic markup, like so:
SCSS
{{#markdown}}
```scss
.custom-button-group-class {
@include button-group-container();
.custom-button-class {
@include button();
}
& > li { @include button-group-style(); }
}
```
{{/markdown}}
You can find more information regarding button mixins here.
HTML
{{> examples_button_group_basic_mixin}}
Advanced
You can further customize your button groups using using the provided options in the `button-group-container()` and `button-group-style()` mixin:
##### Button Group Container Options
SCSS
{{> examples_button_group_container_mixin}}
##### Button Group Style Options
SCSS
{{> examples_button_group_style_mixin}}
***
### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
```scss
@import "foundation/components/button-groups";
```