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


Styling

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

HTML

<!-- Radius Button Group --> <ul class="button-group radius"> <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> <li><a href="#" class="button">Button 4</a></li> </ul> <!-- Rounded Button Group --> <ul class="button-group round"> <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> <li><a href="#" class="button">Button 4</a></li> </ul>

Rendered HTML


Advanced

Adding an even class with the specified number of buttons in that group allows the button group to evenly expand to the edges of its container. With Foundation classes you can use the even class up to even-8.

HTML

<ul class="button-group even-3"> <li><a href="#" class="button secondary">Button 1</a></li> <li><a href="#" class="button secondary">Button 2</a></li> <li><a href="#" class="button secondary">Button 3</a></li> </ul> <ul class="button-group round even-6"> <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> <li><a href="#" class="button">Button 4</a></li> <li><a href="#" class="button">Button 5</a></li> <li><a href="#" class="button">Button 6</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

<!-- You can mix styles in a button bar if you want. --> <div class="button-bar"> <ul class="button-group round"> <li><a href="#" class="small button secondary">Button 1</a></li> <li><a href="#" class="small button secondary">Button 2</a></li> <li><a href="#" class="small button secondary">Button 3</a></li> </ul> <ul class="button-group radius"> <li><a href="#" class="small button success">Button 1</a></li> <li><a href="#" class="small button success">Button 2</a></li> <li><a href="#" class="small button success">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); $button-group-border-width: 1px;

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 »