Overview

The Segmented Control component provides an intuitive toggle bar for switching between mutually exclusive choices, views, or filter options.

<div class="segmented-control" role="group" aria-label="View switch">
  <button type="button" class="segmented-item active" aria-selected="true"><span>Day</span></button>
  <button type="button" class="segmented-item" aria-selected="false"><span>Week</span></button>
  <button type="button" class="segmented-item" aria-selected="false"><span>Month</span></button>
</div>

Sizes

Use .segmented-control-sm or .segmented-control-lg for alternate proportions.

<div class="d-flex flex-column gap-3">
  <div class="segmented-control segmented-control-sm" role="group" aria-label="Small switch">
    <button type="button" class="segmented-item active"><span>List</span></button>
    <button type="button" class="segmented-item"><span>Grid</span></button>
  </div>

  <div class="segmented-control segmented-control-lg" role="group" aria-label="Large switch">
    <button type="button" class="segmented-item active"><span>Standard</span></button>
    <button type="button" class="segmented-item"><span>Pro Plan</span></button>
  </div>
</div>