ds
Components
Segmented control

Segmented control

Pick one of a few options. Filters and modes.

fin1te

Code

<div class="seg" role="group" aria-label="Show commits from">
  <button aria-pressed="true">All</button>
  <button aria-pressed="false">Work</button>
  <button aria-pressed="false">Personal</button>
</div>

Inline and recessed. The stats and work pages use it to filter what the page shows.

topo, in panels

Code

<div class="seg fill" role="radiogroup" aria-label="Link style" style="max-width:18rem">
  <button role="radio" aria-checked="true">data</button>
  <button role="radio" aria-checked="false">control</button>
  <button role="radio" aria-checked="false">fallback</button>
  <button role="radio" aria-checked="false">stream</button>
</div>

API

Class	On	What it does
`.seg`	div	The track. Buttons inside are the options.
`.fill`	.seg	Equal-width columns, tighter, on --bg.
`.sm`	.seg	Compact buttons.
`aria-pressed / aria-checked / aria-selected / .on`	button	The selected option.

Accessibility

Filters that change what is shown: a role="group" of toggle buttons with aria-pressed.
A single value (like a form field): role="radiogroup" and role="radio" with aria-checked, arrow keys to move.