Segmented control
One choice from a few, with a sliding thumb
Default
The words beside it follow the choice.
Code
<div class="segmented" role="group" aria-label="View" data-segmented="seg-1">
<span class="seg-thumb" aria-hidden="true"></span>
<button type="button" aria-pressed="false" data-value="Day">Day</button>
<button type="button" aria-pressed="true" data-value="Week">Week</button>
<button type="button" aria-pressed="false" data-value="Month">Month</button>
</div>
<span class="muted fs-sm"><span>Showing </span><span data-bound="seg-1" data-values='{"Day":"today","Week":"this week","Month":"this month"}'>this week</span></span>Full width
Code
<div class="segmented segmented-block" role="group" aria-label="Plan" data-segmented="seg-2">
<span class="seg-thumb" aria-hidden="true"></span>
<button type="button" aria-pressed="true" data-value="Monthly">Monthly</button>
<button type="button" aria-pressed="false" data-value="Yearly">Yearly</button>
</div>
<span class="muted fs-sm d-block mt-3"><span data-bound="seg-2" data-values='{"Monthly":"$15 per seat, billed each month","Yearly":"$144 per seat, billed once a year"}'>$15 per seat, billed each month</span></span>