kit

Button group

Related actions joined into one control, such as text alignment or zoom, with optional toggle buttons.

Tier 1 · CSS only Group (role="group") preview

Example

Show the markup 
<div class="demo-row">
  <div class="kit-button-group" role="group" aria-label="View">
    <button class="kit-button" type="button" aria-pressed="true" data-demo-toggle>List</button>
    <button class="kit-button" type="button" aria-pressed="false" data-demo-toggle>Board</button>
    <button class="kit-button" type="button" aria-pressed="false" data-demo-toggle>Calendar</button>
  </div>
  <div class="kit-button-group" role="group" aria-label="Zoom">
    <button class="kit-button" data-icon type="button" aria-label="Zoom out"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M3.5 8h9"/></svg></button>
    <button class="kit-button" type="button">100%</button>
    <button class="kit-button" data-icon type="button" aria-label="Zoom in"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M3.5 8h9M8 3.5v9"/></svg></button>
  </div>
</div>

Usage

Wrap two to five kit-buttons in <div class="kit-button-group" role="group" aria-label="…">. For a group where each button turns something on or off independently, give the buttons aria-pressed. If only one can be chosen at a time, use the segmented control instead.

Accessibility

  • role="group" with an aria-label names the set ("Text alignment").
  • Toggle buttons use aria-pressed="true" or "false", so screen readers announce "pressed".
  • Each button stays in the tab order; the group doesn't change keyboard behaviour.