Chip

Wayfinding labels on pages. No punctuation. Max 2-3 words.

WCAG 2.2 AA Reviewed April 2026

Also known as pills, chips are used to help identify types of content or act as wayfinding on pages.

Content guidance: No punctuation.

Default Chip

Program

View HTML

<span class="txds-chip">Program</span>

Multiple Chips

Program Health Education Finance

View HTML

<div style="display: flex; flex-wrap: wrap; gap: 8px;">
  <span class="txds-chip">Program</span>
  <span class="txds-chip">Health</span>
  <span class="txds-chip">Education</span>
  <span class="txds-chip">Finance</span>
</div>

Removable Chip

View HTML

<div style="display: flex; flex-wrap: wrap; gap: 8px;">
  <button type="button" class="txds-chip txds-chip--removable" aria-label="Remove Program filter">
    Program
    <span class="txds-chip__close" aria-hidden="true"></span>
  </button>
  <button type="button" class="txds-chip txds-chip--removable" aria-label="Remove Health filter">
    Health
    <span class="txds-chip__close" aria-hidden="true"></span>
  </button>
</div>

Mixed

Finance

View HTML

<div style="display: flex; flex-wrap: wrap; gap: 8px;">
  <button type="button" class="txds-chip txds-chip--removable" aria-label="Remove Program filter">
    Program
    <span class="txds-chip__close" aria-hidden="true"></span>
  </button>
  <button type="button" class="txds-chip txds-chip--removable" aria-label="Remove Education filter">
    Education
    <span class="txds-chip__close" aria-hidden="true"></span>
  </button>
  <span class="txds-chip">Finance</span>
</div>

CSS Classes

Class	Description
`txds-chip`	Base chip/pill. Static label, not interactive.
`txds-chip--removable`	Interactive chip with a close/remove button.
`txds-chip__close`	Close (×) button inside a removable chip.