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

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

Colors

To show a button-group containing non-primary colors, (e.g. secondary, contextual colors, etc.), add the desired class on a per-button level.

<!-- Varying colors in a button group -->
<ul class="button-group">
    <li><a href="#" class="button">Primary</a></li>
    <li><a href="#" class="button secondary">Secondary</a></li>
    <li><a href="#" class="button success">Success Button</a></li>
    <li><a href="#" class="button alert">Alert Button</a></li>
</ul>

Sizing

You may resize buttons in button-groups as you would a normal button.

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

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

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

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

Expanded

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.

<!-- Expanded button groups -->
<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 even-6">
    <li><a href="#" class="button">Butt 1</a></li>
    <li><a href="#" class="button">Butt 2</a></li>
    <li><a href="#" class="button">Butt 3</a></li>
    <li><a href="#" class="button">Butt 4</a></li>
    <li><a href="#" class="button">Butt 5</a></li>
    <li><a href="#" class="button">Butt 6</a></li>
</ul>

Stacking

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

<!-- Stacked button group -->
<ul class="stack button-group">
    <li><a href="#" class="button">Button 1</a></li>
    <li><a href="#" class="button">Button 2</a></li>
</ul>

Responsiveness

To stacks buttons vertically on small screens and horizontally on large screens, use the .stack-for-small class.

<!-- Responsively stacked button group -->
<ul class="stack-for-small secondary button-group">
    <li><a href="#" class="button">Button 1</a></li>
    <li><a href="#" class="button">Button 2</a></li>
</ul>

Example Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.