Foundation
Jump to Nav

# Button Group

Flexbox

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.

## 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.

    <div class="button-group">
      <a class="button">One</a>
      <a class="button">Two</a>
      <a class="button">Three</a>
    </div>

One Two Three

## Sizing

Button groups can be sized with the same classes as standard buttons: `.tiny`, `.small`, and `.large`.

    <div class="small button-group">
      <a class="button">Small</a>
      <a class="button">Button</a>
      <a class="button">Group</a>
    </div>

Small Button Group

## Coloring

Buttons within a button group can be colored individually with the `.secondary`, `.success`, `.warning`, and `.alert` classes.

    <div class="button-group">
      <a class="secondary button">View</a>
      <a class="success button">Edit</a>
      <a class="warning button">Share</a>
      <a class="alert button">Delete</a>
    </div>

View Edit Share Delete

The entire group can also be colored using the same classes.

    <div class="secondary button-group">
      <a class="button">Harder</a>
      <a class="button">Better</a>
      <a class="button">Faster</a>
      <a class="button">Stronger</a>
    </div>

Harder Better Faster Stronger

## 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.

    <div class="expanded button-group">
      <a class="button">Expanded</a>
      <a class="button">Button</a>
      <a class="button">Group</a>
    </div>

Expanded Button Group

## 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.

    <div class="stacked-for-small button-group">
      <a class="button">How</a>
      <a class="button">Low</a>
      <a class="button">Can</a>
      <a class="button">You</a>
      <a class="button">Go</a>
    </div>

How Low Can You Go

## 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".

    <div class="button-group">
      <a class="button">Primary Action</a>
      <a class="dropdown button arrow-only">
        <span class="show-for-sr">Show menu</span>
      </a>
    </div>

Primary Action Show menu

## Sass Reference

### Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name | Type | Default Value | Description
--- | --- | --- | ---
`$buttongroup-margin` | Number | `1rem` | Margin for button groups.
`$buttongroup-spacing` | Border | `1px` | Margin between buttons in a button group.
`$buttongroup-child-selector` | String | `'.button'` | Selector for the buttons inside a button group.
`$buttongroup-expand-max` | Number | `6` | Maximum number of buttons that can be in an even-width button group.
`$buttongroup-radius-on-each` | Boolean | `true` | Determines if $button-radius is applied to each button or the button group as a whole. Use $global-radius in _settings.scss to change radius.

### Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

#### button-group

    @include button-group($child-selector);

Add styles for a button group container.

Parameter | Type | Default Value | Description
--- | --- | --- | ---
`$child-selector` | String | `$buttongroup-child-selector` | Selector for the buttons inside a button group.

#### button-group-expand

    @include button-group-expand($selector);

Creates a full-width button group, making each button equal width.

Parameter | Type | Default Value | Description
--- | --- | --- | ---
`$selector` | String | `$buttongroup-child-selector` | Selector for the buttons inside a button group.

#### button-group-stack

    @include button-group-stack($selector);

Stacks the buttons in a button group.

Parameter | Type | Default Value | Description
--- | --- | --- | ---
`$selector` | String | `$buttongroup-child-selector` | Selector for the buttons inside the button group.

#### button-group-unstack

    @include button-group-unstack($selector);

Un-stacks the buttons in a button group.

Parameter | Type | Default Value | Description
--- | --- | --- | ---
`$selector` | String | `$buttongroup-child-selector` | Selector for the buttons inside the button group.