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.

Watch this part in video

edit on codepen button
<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.

Watch this part in video

edit on codepen button
<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.

Watch this part in video

edit on codepen button
<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="primary button-group">
  <a class="button">Harder</a>
  <a class="button">Better</a>
  <a class="button">Faster</a>
  <a class="button">Stronger</a>
</div>

Hollow and clear

Buttons within a button group can be given hollow and clear styles individually by adding a class .hollow or .clear respectively.

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

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

The entire group can also be given hollow or clear styles using the same class.

<div class="button-group hollow">
  <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>

<div class="button-group clear">
  <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>

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.

<div class="primary button-group no-gaps">
  <a class="button">Harder</a>
  <a class="button">Better</a>
  <a class="button">Faster</a>
  <a class="button">Stronger</a>
</div>

You can use no-gaps on hollow styles.

<div class="primary button-group hollow no-gaps">
  <a class="button">Harder</a>
  <a class="button">Better</a>
  <a class="button">Faster</a>
  <a class="button">Stronger</a>
</div>

You can use no-gaps with all grouped/individual styles.

<div class="button-group no-gaps">
  <a class="secondary button">View</a>
  <a class="success button">Share</a>
  <a class="warning button hollow">Edit</a>
  <a class="alert button clear">Delete</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.

Watch this part in video

edit on codepen button
<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.

Watch this part in video

edit on codepen button
<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".

Watch this part in video

edit on codepen button
<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>

Flexbox Button Group

The buttons in a button group can be positioned using the Flexbox Utility classes in Foundation. You can use .align-center, .align-right, .align-spaced, or .align-justify.

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

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

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

<div class="button-group align-justify">
  <a class="button">One</a>
  <a class="button">Two</a>
  <a class="button">Three</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 Number 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. (Only needed when $global-flexbox: false;)

$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, $spacing);

Add styles for a button group container.

ParameterTypeDefault ValueDescription
$child-selector String $buttongroup-child-selector

Selector for the buttons inside a button group.

$spacing Number $buttongroup-spacing

Spacing between buttons in a button group.


button-group-no-gaps

@include button-group-no-gaps($selector);

Make buttons bonded without gap between them. Borders between buttons are merged

ParameterTypeDefault ValueDescription
$selector String $buttongroup-child-selector

Selector for the buttons inside a button group.


button-group-expand

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

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.

$spacing Number $buttongroup-spacing

Spacing between buttons in 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.