Skip to content
heyrav design system
ComponentsIn tools

Chip

A pressable pill for presets and filters. aria-pressed carries the state; a pressed chip fills with ink.

Used onTool presets
Show code
<div class="chips"><button class="chip" aria-pressed="true">All</button><button class="chip" aria-pressed="false">Case studies</button><button class="chip" aria-pressed="false">Experiments</button><button class="chip" aria-pressed="false">Writing</button></div>

Single choice

Add data-single to the group and only one chip stays pressed - this is how the tools' presets work.

Show code
<div class="chips" data-single><button class="chip" aria-pressed="true">Calm</button><button class="chip" aria-pressed="false">Dense</button><button class="chip" aria-pressed="false">Wild</button></div>

Chips are 44px tall at --t-ui. If a set of options is exclusive and always visible, consider a Segmented control instead.