Segmented
Segmented button groups display a set of discrete buttons in a row as a single element.
Segmented
<h6>Segmented</h6>
<ul class="usa-button-group usa-button-group--segmented">
<li class="usa-button-group__item">
<button class="usa-button">Map</button>
</li>
<li class="usa-button-group__item">
<button class="usa-button usa-button--outline">Satellite</button>
</li>
<li class="usa-button-group__item">
<button class="usa-button usa-button--outline">Hybrid</button>
</li>
</ul>
<h6>Segmented</h6>
<ul class="usa-button-group usa-button-group--segmented">
<li class="usa-button-group__item">
<button class="usa-button">Map</button>
</li>
<li class="usa-button-group__item">
<button class="usa-button usa-button--outline">Satellite</button>
</li>
<li class="usa-button-group__item">
<button class="usa-button usa-button--outline">Hybrid</button>
</li>
</ul>
When to use the segmented button groups
- Categorically related controls. For example, segmented buttons can be used as a switch between different views.
When to consider something else
- No clear relationship. Consider how placement and alternative structure of unrelated controls can improve usability over placing all actions in a group.
- If there are more than three buttons. Be mindful of how a long list of buttons might appear on small screens. An alternative type of control might be more suitable.
Usability guidance
- Avoid ambiguity of current state. Make sure current states are clearly communicated and understood.
Accessibility
- Use
aria-label
to give the buttons a useful name. Some contexts may require additional context provided to screen readers. - Use the
<button>
element. Don't use<a>
because it's a link. Don't use<span>
because screen readers won't know it's a usable button.
Implementation
- Don't mix differently-sized buttons (like a default button and a big button) in the same group.
- Use short, descriptive button labels to describe controls.
- Use default buttons as a current state and outline buttons as a non-current state. The segmented button group works with all button variants. However, you may need to create custom styles to distinguish state for some button variants.
Package information
-
Package usage:
@import usa-button-group
-
Requires:
required
,global