--- title: Button Groups ---

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.

*** {{> 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}}
Stack
Stack for Small
*** ## 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"; ```