Use the .button-group class and a combination of radio inputs (.button-group__radio) and labels (.button-group__item) to create segmented controls. This pattern should only be used when there are at least 3 buttons.
<div class="button-group">
<input class="button-group__radio" type="radio" id="option_1" value="option_1" name="options" checked="checked">
<label class="button-group__item" for="option_1">Option 1</label>
<input class="button-group__radio" type="radio" id="option_2" value="option_2" name="options">
<label class="button-group__item" for="option_2">Option 2</label>
<input class="button-group__radio" type="radio" id="option_3" value="option_3" name="options">
<label class="button-group__item" for="option_3">Option 3</label>
</div>Simply use .button-group--small to create a smaller version of the segmented button above.
<div class="button-group--small">
<input class="button-group__radio" type="radio" id="option_4" value="option_4" name="options" checked="checked">
<label class="button-group__item" for="option_4">Option 4</label>
<input class="button-group__radio" type="radio" id="option_5" value="option_5" name="options">
<label class="button-group__item" for="option_5">Option 5</label>
<input class="button-group__radio" type="radio" id="option_6" value="option_6" name="options">
<label class="button-group__item" for="option_6">Option 6</label>
</div>