Selectable chips for quick, visible filtering.
| Prop / event | Type | Notes |
|---|---|---|
| value / onChange | string | string[] | Selected pill(s); controlled |
| multiple | boolean | Checkbox semantics with a leading check |
| count | number | Trailing match count in muted mono |
| disabled | boolean | Unselectable |
| ← / → · Space | — | Move within the group; Space toggles |
Pills select and filter, and hold their state. For a read-only label use a Tag; for a status use a Badge; for switching whole views use Tabs.
Keep one option always selected in a single-select filter row.
Don't light every pill. If all are on, none is filtering.
Add a check to multi-select pills so on-versus-off is unmistakable.
Don't use a pill for a static label. That is a Tag, and it isn't clickable.
Filter a list by status, each pill showing its match count.
Multi-select topics or tags when assigning or filtering.
A compact time-range switch above a chart.
| Token | Value | Role |
|---|---|---|
| --pill-pad | 6px 13px | Chip padding |
| --pill-bg | #16171B | Resting fill |
| --pill-border | #2A2A30 | Resting border |
| --pill-on-fill | rgba(255,122,0,.14) | Selected tint |
| --pill-on-text | #FF9D45 | Selected label + check |
| --pill-radius | 999px | Fully rounded |
<div class="o-pills" role="radiogroup" aria-label="Status">
<button class="o-pill is-on" role="radio" aria-checked="true">All</button>
<button class="o-pill" role="radio" aria-checked="false">Active</button>
<button class="o-pill" role="radio" aria-checked="false">
Draft <span class="o-pill__count">8</span>
</button>
</div>