Sections

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

Classes

Section titled Classes

Class	Applied to	Description
`.s-btn-group`	`N/A`	Base button group style.
`.s-btn-group__radio`	`.s-btn-group`	Applies styling to button groups built using radio and label elements.

Accessibility

Section titled Accessibility

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`.

Example

Section titled Example

<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>
        <button class="s-btn s-btn__muted s-btn__outlined is-selected" role="button" aria-current="true">Votes</button>
    </form>
    <button class="s-btn s-btn__muted s-btn__outlined" role="button">Active</button>
    <form>
        <button class="s-btn s-btn__muted s-btn__outlined" role="button">Unanswered</button>
    </form>
</div>

Counts

Section titled Counts

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" aria-current="true">
        All
        <span class="s-btn--badge">
            <span class="s-btn--number">234</span>
        </span>
    </button>
</div>

Radio

Section titled Radio

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

<div class="s-btn-group s-btn-group__radio">
    <input class="s-btn--radio" type="radio" name="example-btn-group" id="example-btn-group-1" />
    <label class="s-btn s-btn__muted s-btn__outlined" for="example-btn-group-1">
        Active
    </label>
    <input class="s-btn--radio" type="radio" name="example-btn-group" id="example-btn-group-2" />
    <label class="s-btn s-btn__muted s-btn__outlined" for="example-btn-group-2">
        Inactive
    </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 s-btn__outlined" for="example-btn-group-3">
        All
    </label>
</div>

Active Inactive All