Segmented button group

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>

Guidance

When to use the segmented button group

  • 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 guidance

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

Using the segmented button group

  • 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

  • Package usage: @forward "usa-button-group";
  • Dependencies: usa-button