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.
You can create a button group as follows.
<!-- A default button-group -->
<ul class="button-group">
<li><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
</ul>
To show a button-group containing non-primary colors, (e.g. secondary, contextual colors, etc.), add the desired class on a per-button-group level.
<!-- Secondary Button Group -->
<ul class="button-group secondary">
<li><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
<li><button>Button 4</button></li>
</ul>
<!-- Tertiary Button Group -->
<ul class="button-group tertiary">
<li><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
<li><button>Button 4</button></li>
</ul>
<!-- Dull Button Group -->
<ul class="button-group dull">
<li><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
<li><button>Button 4</button></li>
</ul>
<!-- Info Button Group -->
<ul class="button-group info">
<li><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
<li><button>Button 4</button></li>
</ul>
<div class="bg-dark-grey padding-medium">
<!-- Ghost Button Group -->
<ul class="button-group ghost">
<li><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
<li><button>Button 4</button></li>
</ul>
</div>
Just as you would add an active state to a button, you may do the same on entries in a button-group.
<!-- Primary Button Group -->
<ul class="button-group">
<li class="active"><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
<li><button>Button 4</button></li>
</ul>
<!-- Secondary Button Group -->
<ul class="button-group secondary">
<li class="active"><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
<li><button>Button 4</button></li>
</ul>
<!-- Tertiary Button Group -->
<ul class="button-group tertiary">
<li class="active"><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
<li><button>Button 4</button></li>
</ul>
<!-- Dull Button Group -->
<ul class="button-group dull">
<li class="active"><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
<li><button>Button 4</button></li>
</ul>
<!-- Info Button Group -->
<ul class="button-group info">
<li class="active"><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
<li><button>Button 4</button></li>
</ul>
<div class="bg-dark-grey padding-medium">
<!-- Ghost Button Group -->
<ul class="button-group ghost">
<li class="active"><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
<li><button>Button 4</button></li>
</ul>
</div>
You may resize buttons in button-groups as you would a normal button.
<!-- A tiny button-group -->
<ul class="button-group tiny">
<li><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
</ul>
<!-- A small button-group -->
<ul class="button-group small">
<li><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
</ul>
<!-- Default button-group -->
<ul class="button-group">
<li><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
</ul>
<!-- A large button-group -->
<ul class="button-group large">
<li><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
</ul>
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 secondary even-3">
<li><button>Button 1</button></li>
<li><button>Button 2</button></li>
<li><button>Button 3</button></li>
</ul>
<ul class="button-group even-6">
<li><button>Butt 1</button></li>
<li><button>Butt 2</button></li>
<li><button>Butt 3</button></li>
<li><button>Butt 4</button></li>
<li><button>Butt 5</button></li>
<li><button>Butt 6</button></li>
</ul>
You can change the orientation of a button group with the .stack classes.
<!-- Stacked button group -->
<ul class="stack button-group">
<li><button>Button 1</button></li>
<li><button>Button 2</button></li>
</ul>
<ul class="stack button-group secondary">
<li><button>Button 1</button></li>
<li><button>Button 2</button></li>
</ul>
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 button-group">
<li><button>Button 1</button></li>
<li><button>Button 2</button></li>
</ul>
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.