Skip to main content

Button groups

Razor
Figma

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 and the aria-current attribute with the appropriate value to show the currently selected button.

Class Applied to Description
.s-btn-group N/A Base button group style.

When used as navigation or a filter, button groups should include the aria-current attribute with the appropriate value.

Item Applied to Description
aria-current="[value]" .s-btn.is-selected When using a button group for navigation or filtering, include the aria-current attribute with the appropriate value to the selected button. Most commonly used values are page, step, and true.

Horizontal layout shift may occur when changing which button is selected within a button group. We recommend including the data-text attribute on each button text element with the value duplicating the text of the button to prevent the layout shift. See below for examples.

Item Applied to Description
data-text="[value]" .s-btn Prevents layout shift when changing selected button. Value should be the text of the button.
<div class="s-btn-group">
<button class="s-btn s-btn__muted" type="button">
<span class="s-btn--text" data-text="Newest">Newest</span>
</button>
<button class="s-btn s-btn__muted" type="button">
<span class="s-btn--text" data-text="Frequent">Frequent</span>
</button>
<button class="s-btn s-btn__muted is-selected" type="button" aria-current="true">
<span class="s-btn--text" data-text="Votes">Votes</span>
</button>
<button class="s-btn s-btn__muted" type="button">
<span class="s-btn--text" data-text="Active">Active</span>
</button>
<button class="s-btn s-btn__muted" type="button">
<span class="s-btn--text" data-text="Unanswered">Unanswered</span>
</button>
</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" type="button">
<span class="s-btn--text" data-text="Active">Active</span>
<span class="s-btn--badge">
<span class="s-btn--number">197</span>
</span>
</button>
<button class="s-btn s-btn__muted" type="button">
<span class="s-btn--text" data-text="Inactive">Inactive</span>
<span class="s-btn--badge">
<span class="s-btn--number">37</span>
</span>
</button>
<button class="s-btn s-btn__muted is-selected" type="button" aria-current="true">
<span class="s-btn--text" data-text="All">All</span>
<span class="s-btn--badge">
<span class="s-btn--number">234</span>
</span>
</button>
</div>

Button groups can be implemented using radio elements with the class .s-btn--radio on the radio input element. This class assumes all buttons are styled label elements.

<div class="s-btn-group">
<input class="s-btn--radio" type="radio" name="example-btn-group" id="example-btn-group-1" />
<label class="s-btn s-btn__muted" for="example-btn-group-1">
<span class="s-btn--text" data-text="Active">Active</span>
</label>
<input class="s-btn--radio" type="radio" name="example-btn-group" id="example-btn-group-2" />
<label class="s-btn s-btn__muted" for="example-btn-group-2">
<span class="s-btn--text" data-text="Inactive">Inactive</span>
</label>
<input class="s-btn--radio" type="radio" name="example-btn-group" id="example-btn-group-3" checked />
<label class="s-btn s-btn__muted" for="example-btn-group-3">
<span class="s-btn--text" data-text="All">All</span>
</label>
</div>

In some cases items in the button groups let users navigate between related sections of content, displaying one section at a time. In those cases an a tag should be prefferred over the button.

<div class="s-btn-group">
<a href="#" class="s-btn s-btn__muted is-selected" aria-current="true">Newest</a>
<a href="#" class="s-btn s-btn__muted">Frequent</a>
<a href="#" class="s-btn s-btn__muted">Unanswered</a>
</div>
Deploys by Netlify