<div class="row">
  <span class="pill">Terminal fleet</span>
  <span class="pill">Certificate renewal</span>
  <span class="pill">Q4 window</span>
</div>

Approvals 14 Attachments 3 Overdue 2

Pills with a count

<div class="row">
  <span class="pill">Approvals <span class="badge">14</span></span>
  <span class="pill">Attachments <span class="badge">3</span></span>
  <span class="pill">Overdue <span class="badge badge--danger">2</span></span>
</div>

Filter pills (aria-pressed)

<div class="row" role="group" aria-label="Filter by state">
  <button class="pill" aria-pressed="true" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') !== 'true')">All</button>
  <button class="pill" aria-pressed="false" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') !== 'true')">Pending</button>
  <button class="pill" aria-pressed="false" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') !== 'true')">Approved</button>
</div>

Harborline Freight Medium priority Owen Bristol

Removable pills

<div class="row" id="pill-tags">
  <span class="pill">Harborline Freight <button class="pill__x" aria-label="Remove Harborline Freight" onclick="this.closest('.pill').remove()">&times;</button></span>
  <span class="pill">Medium priority <button class="pill__x" aria-label="Remove Medium priority" onclick="this.closest('.pill').remove()">&times;</button></span>
  <span class="pill">Owen Bristol <button class="pill__x" aria-label="Remove Owen Bristol" onclick="this.closest('.pill').remove()">&times;</button></span>
</div>

Usage

A pill is a chip that does something; a badge is a chip that says something. Labels and states are badges; tags, filters, and selections are pills.
Toggle filters with aria-pressed, not a colour swap alone — the selected pill gets the accent tint and the state is announced.
Removable pills carry a .pill__x button with its own aria-label naming what it removes; "Remove" alone reads as noise to a screen reader.
Counts live inside a pill as a .badge, judgement colour only when the number judges.
Lay pills out in a .row so they wrap instead of colliding on a phone.

‹ Badge Avatar ›