Toggle group

Single or multi-select toggle bar.

Source: src/stylus/components/toggle-group.styl

Text formatting

Each button is a .toggle; the pressed one carries .active.

<div class="toggle-group">
  <button type="button" class="toggle active" aria-label="Bold"><b>B</b></button>
  <button type="button" class="toggle" aria-label="Italic"><i>I</i></button>
  <button type="button" class="toggle" aria-label="Underline"><u>U</u></button>
</div>

Outline and connected

.toggle-outline drops the fill; .toggle-group-connected joins the edges.

<div class="toggle-group toggle-group-connected">
  <button type="button" class="toggle toggle-outline active">Grid</button>
  <button type="button" class="toggle toggle-outline">List</button>
</div>