Two to four mutually exclusive options: a mode (Profit / Markup) or a view (List / Sheet / Cards). Native radios, so arrow keys work. Labels keep one weight in both states, so they don't jump when selected.
Sizes and states
| sm · 32 |
|
| md · 40 |
|
| hover · focus |
|
<div class="segmented" role="radiogroup" aria-label="Margin type">
<label class="segmented-option"><input type="radio" name="margin" checked> Profit</label>
<label class="segmented-option"><input type="radio" name="margin"> Markup</label>
</div>