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

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

Watch this part in video

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

Watch this part in video

<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="primary 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

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>

View Edit Share Delete

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>

View Edit Share Delete

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>

Harder Better Faster Stronger

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>

Harder Better Faster Stronger

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>

View Share Edit Delete

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

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

Watch this part in video

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

Watch this part in video

<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

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>

One Two Three

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

Parameter	Type	Default Value	Description
`$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

Parameter	Type	Default Value	Description
`$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.

Parameter	Type	Default Value	Description
`$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.

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.