Segmented button

The segmented button (.segmented) is a pill-shaped group of mutually-exclusive or independently toggleable options rendered as adjoining buttons — the class-based equivalent of a native radio group or a tab strip, used for compact view switchers or short multi-choice settings.

<div class="segmented" role="radiogroup" aria-label="View">
  <button type="button" class="segmented-item action-select" id="seg-list" role="radio" aria-checked="true" tabindex="0">List</button>
  <button type="button" class="segmented-item action-select" id="seg-grid" role="radio" aria-checked="false" tabindex="-1">Grid</button>
  <button type="button" class="segmented-item action-select" id="seg-map" role="radio" aria-checked="false" tabindex="-1">Map</button>
</div>