Button groups
Button groups are a collection of buttons. This component is used in our questions view, and is frequently used in conjunction with other form elements such as search fields and sorting dropdowns. If the content you’re interacting with is a simple paring down or filter of the current view, it’s appropriate to use the .s-btn-group component. Add the class .is-selected to show the currently-selected button.
| Class | Applied to | Description |
|---|---|---|
.s-btn-group |
N/A |
Base button group style. |
.s-btn-group--container |
form |
When required to wrap one of our buttons within a button group in a form, apply this class to the form to maintain the intended visuals. |
<div class="s-btn-group">
<button class="s-btn s-btn__muted s-btn__outlined" role="button">Newest</button>
<button class="s-btn s-btn__muted s-btn__outlined" role="button">Frequent</button>
<form class="s-btn-group--container">
<button class="s-btn s-btn__muted s-btn__outlined is-selected" role="button">Votes</button>
</form>
<button class="s-btn s-btn__muted s-btn__outlined" role="button">Active</button>
<form class="s-btn-group--container">
<button class="s-btn s-btn__muted s-btn__outlined" role="button">Unanswered</button>
</form>
</div>Counts are used to display a numerical count inside a button group. This is good for large data sets where it’s helpful to quickly know how many items are behind each filter.
<div class="s-btn-group">
<button class="s-btn s-btn__muted s-btn__outlined" role="button">
Active
<span class="s-btn--badge">
<span class="s-btn--number">197</span>
</span>
</button>
<button class="s-btn s-btn__muted s-btn__outlined" role="button">
Inactive
<span class="s-btn--badge">
<span class="s-btn--number">37</span>
</span>
</button>
<button class="s-btn s-btn__muted s-btn__outlined is-selected" role="button">
All
<span class="s-btn--badge">
<span class="s-btn--number">234</span>
</span>
</button>
</div>