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>

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>

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>

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>

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>

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>

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>

Sass Reference

Variables

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

NameTypeDefault ValueDescription
$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.

ParameterTypeDefault ValueDescription
$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.

ParameterTypeDefault ValueDescription
$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.

ParameterTypeDefault ValueDescription
$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.

ParameterTypeDefault ValueDescription
$selector String $buttongroup-child-selector

Selector for the buttons inside the button group.