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