Button Groups

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.



Basic

You can create a button group using minimal markup.

HTML

<!-- A default button-group with small buttons inside --> <ul class="button-group"> <li><a href="#" class="button">Button 1</a></li> <li><a href="#" class="button">Button 2</a></li> <li><a href="#" class="button">Button 3</a></li> </ul>

Rendered HTML


Advanced

Additional classes can be added to your button group to change its appearance.

HTML

<ul class="button-group [radius round]"> <li><a href="#" class="button [secondary alert success]">Button 1</a></li> <li><a href="#" class="button [secondary alert success]">Button 2</a></li> <li><a href="#" class="button [secondary alert success]">Button 3</a></li> <li><a href="#" class="button [secondary alert success]">Button 4</a></li> </ul>

Rendered HTML

Stacking

You can change the orientation of a button group with the stack classes.

stack: Stacks buttons vertically.

stack-for-small: Stacks buttons vertically on small screens and horizontally on large screens

<ul class="stack button-group"> <li><a href="#" class="button">Button 1</a></li> <li><a href="#" class="button">Button 2</a></li> </ul> <ul class="stack-for-small round secondary button-group"> <li><a href="#" class="button">Button 1</a></li> <li><a href="#" class="button">Button 2</a></li> </ul>
Stack for Small

Button Bars

A button bar is a group of button groups, perfect for situations where you want groups of actions that are all related to a similar element or page. Simply wrap two or more button groups in a .button-bar and Foundation takes care of the rest.

Basic

You can create a button bar using minimal markup.

HTML

<div class="button-bar"> <ul class="button-group"> <li><a href="#" class="small button">Button 1</a></li> <li><a href="#" class="small button">Button 2</a></li> <li><a href="#" class="small button">Button 3</a></li> </ul> <ul class="button-group"> <li><a href="#" class="small button">Button 1</a></li> <li><a href="#" class="small button">Button 2</a></li> <li><a href="#" class="small button">Button 3</a></li> </ul> </div>

Rendered HTML

Advanced

Additional classes can be added to your button bar to change its appearance.

HTML

<div class="button-bar"> <ul class="button-group [radius round]"> <li><a href="#" class="[tiny small large] button [alert success secondary] [disabled]">Button 1</a></li> <li><a href="#" class="[tiny small large] button [alert success secondary] [disabled]">Button 2</a></li> <li><a href="#" class="[tiny small large] button [alert success secondary] [disabled]">Button 3</a></li> </ul> <ul class="button-group [radius round]"> <li><a href="#" class="[tiny small large] button [alert success secondary] [disabled]">Button 1</a></li> <li><a href="#" class="[tiny small large] button [alert success secondary] [disabled]">Button 2</a></li> <li><a href="#" class="[tiny small large] button [alert success secondary] [disabled]">Button 3</a></li> </ul> </div>

Rendered HTML


Customize with Sass

Button bars can be easily customized using our provided Sass variables.

SCSS

$include-html-button-classes: $include-html-classes; // Sets the margin for the right side by default, and the left margin if right-to-left direction is used $button-bar-margin-opposite: rem-calc(10);

Semantic Markup With Sass

You can use our mixins to use button groups on your own markup.

Basic

You can use the button-group-container() and button-group-style() mixins to create your own button groups and button bars with semantic markup, like so:

SCSS

.custom-button-group-class { @include button-group-container(); .custom-button-class { @include button(); } & > li { @include button-group-style(); } }

You can find more information regarding button mixins here.

HTML

<ul class="custom-button-group-class"> <li><a href="#" class="custom-button-class">Button 1</a></li> <li><a href="#" class="custom-button-class">Button 2</a></li> <li><a href="#" class="custom-button-class">Button 3</a></li> </ul>

Advanced

You can further customize your button groups using using the provided options in the button-group-container() and button-group-style() mixin:

Button Group Container Options

SCSS

.custom-button-container-class { @include button-group-container( // we use this to add styles for a button group container. Default: true $styles:true, // We use this if we want the button group container floated. It relies on the $default-float scss variable. Default: false; $float:false ); .custom-button-class { @include button; } }
Button Group Style Options

SCSS

.your-class-name { @include button-group-container(); .your-button-class { @include button(); } & > li { @include button-group-style( // This controls the radius of the left and right edges. Set to true or px value. Default: false $radius:true, // This makes the buttons take up even space in their container. Set to the number of buttons in the group. Default: false. $even:false, // Controls how the buttons in the group float set to left or right. Default: $default-float. $float:right ); } }

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/button-groups";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »