Segmented button groups display a set of discrete buttons in a row as a single element.
<ul class="usa-button-group usa-button-group--segmented">
<li class="usa-button-group__item">
<button type="button" class="usa-button">Map</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--outline">Hybrid</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--outline">
Satellite
</button>
</li>
</ul>
<ul class="usa-button-group usa-button-group--segmented">
<li class="usa-button-group__item">
<button type="button" class="usa-button">Map</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button">Hybrid</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button">Satellite</button>
</li>
</ul>
<ul class="usa-button-group usa-button-group--segmented">
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--accent-cool">
Map
</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--accent-cool">
Hybrid
</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--accent-cool">
Satellite
</button>
</li>
</ul>
<ul class="usa-button-group usa-button-group--segmented">
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--accent-warm">
Map
</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--accent-warm">
Hybrid
</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--accent-warm">
Satellite
</button>
</li>
</ul>
<ul class="usa-button-group usa-button-group--segmented">
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--base">Map</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--base">Hybrid</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--base">Satellite</button>
</li>
</ul>
<ul class="usa-button-group usa-button-group--segmented">
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--big">Map</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--big">Hybrid</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--big">Satellite</button>
</li>
</ul>
<ul class="usa-button-group usa-button-group--segmented">
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--outline">Map</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--outline">Hybrid</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--outline">
Satellite
</button>
</li>
</ul>
<div class="bg-base-darkest padding-1" style="max-width: fit-content">
<ul class="usa-button-group usa-button-group--segmented">
<li class="usa-button-group__item">
<button
type="button"
class="usa-button usa-button--outline usa-button--inverse"
>
Map
</button>
</li>
<li class="usa-button-group__item">
<button
type="button"
class="usa-button usa-button--outline usa-button--inverse"
>
Hybrid
</button>
</li>
<li class="usa-button-group__item">
<button
type="button"
class="usa-button usa-button--outline usa-button--inverse"
>
Satellite
</button>
</li>
</ul>
</div>
<ul class="usa-button-group usa-button-group--segmented">
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--secondary">Map</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--secondary">
Hybrid
</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--secondary">
Satellite
</button>
</li>
</ul>
<ul class= "usa-button-group usa-button-group--segmented" >
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button" > Map</button>
</li>
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--outline" > Hybrid</button>
</li>
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--outline" >
Satellite
</button>
</li>
</ul>
<ul class= "usa-button-group usa-button-group--segmented" >
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button" > Map</button>
</li>
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button" > Hybrid</button>
</li>
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button" > Satellite</button>
</li>
</ul>
<ul class= "usa-button-group usa-button-group--segmented" >
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--accent-cool" >
Map
</button>
</li>
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--accent-cool" >
Hybrid
</button>
</li>
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--accent-cool" >
Satellite
</button>
</li>
</ul>
<ul class= "usa-button-group usa-button-group--segmented" >
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--accent-warm" >
Map
</button>
</li>
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--accent-warm" >
Hybrid
</button>
</li>
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--accent-warm" >
Satellite
</button>
</li>
</ul>
<ul class= "usa-button-group usa-button-group--segmented" >
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--base" > Map</button>
</li>
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--base" > Hybrid</button>
</li>
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--base" > Satellite</button>
</li>
</ul>
<ul class= "usa-button-group usa-button-group--segmented" >
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--big" > Map</button>
</li>
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--big" > Hybrid</button>
</li>
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--big" > Satellite</button>
</li>
</ul>
<ul class= "usa-button-group usa-button-group--segmented" >
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--outline" > Map</button>
</li>
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--outline" > Hybrid</button>
</li>
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--outline" >
Satellite
</button>
</li>
</ul>
<div class= "bg-base-darkest padding-1" style= "max-width: fit-content" >
<ul class= "usa-button-group usa-button-group--segmented" >
<li class= "usa-button-group__item" >
<button
type= "button"
class= "usa-button usa-button--outline usa-button--inverse"
>
Map
</button>
</li>
<li class= "usa-button-group__item" >
<button
type= "button"
class= "usa-button usa-button--outline usa-button--inverse"
>
Hybrid
</button>
</li>
<li class= "usa-button-group__item" >
<button
type= "button"
class= "usa-button usa-button--outline usa-button--inverse"
>
Satellite
</button>
</li>
</ul>
</div>
<ul class= "usa-button-group usa-button-group--segmented" >
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--secondary" > Map</button>
</li>
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--secondary" >
Hybrid
</button>
</li>
<li class= "usa-button-group__item" >
<button type= "button" class= "usa-button usa-button--secondary" >
Satellite
</button>
</li>
</ul>
Categorically related controls. For example, segmented buttons can be used as a switch between different views.
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.
Avoid ambiguity of current state. Make sure current states are clearly communicated and understood.
Convey relationship. If not using a list element, give the parent element role="group"
in order to convey to screen readers that actions are part of a group. If using as part of a toolbar, use role="toolbar"
.
Use aria-label
to give the buttons a useful name. Some contexts may require additional context provided to screen readers.
Use the <button type="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.
Buttons inside of a button group follow the same guidelines as the button component .
Button groups support any style and size.
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 usage: @forward "usa-button-group";
Dependencies: usa-button