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

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

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.