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.