You can create a button group as follows.
NOTE: NM should use both .button-group and .btn-cta classes when adding new buttons groups to get the most recent design styles. Legacy styles are still available by using just the .button-group class. LV can leave out the btn-cta since those styles are not currently available for LV.
<!-- A default button-group -->
<ul class="button-group btn-cta">
<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 btn-cta 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 btn-cta 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 btn-cta 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 btn-cta 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>
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 btn-cta">
<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 btn-cta 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 btn-cta 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 btn-cta 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 btn-cta 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>
You may resize buttons in button-groups as you would a normal button.
<!-- A tiny button-group -->
<ul class="button-group btn-cta 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 btn-cta 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 btn-cta">
<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 btn-cta 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 btn-cta 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 btn-cta 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 btn-cta">
<li><button>Button 1</button></li>
<li><button>Button 2</button></li>
</ul>
<ul class="stack button-group btn-cta 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 btn-cta">
<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.
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.