Data Display
Chip
Chips are compact UI elements that represent discrete information, such as tags, categories, selections, or input.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features5 checks
- Filter chips use role="checkbox" with aria-checked
- Choice chips use role="radio" within a role="radiogroup"
- Leading icon is aria-hidden to avoid double-reading
- Focus ring: 2px offset at #4a2bc2 on keyboard navigation
- Minimum touch target: 28px height (S size)
When to use this component
✓Do's
- •Use filter chips to toggle filters in a list
- •Use Choice chips for mutually exclusive options (status, category)
- •Show clear selected state so users know which filter is active
- •Use badge counts when quantifying items per category helps decisions
✗Don'ts
- •Don't use chips for navigation, use Tabs or Links instead
- •Don't mix Filter and Choice chips in the same group
- •Don't use chips for status indicators, use Badge instead
- •Don't use long labels, chips should be concise (1–3 words)
Do's and Don'ts
✓ Do's
Use short, clear labels that describe the category or attribute.
✗ Don'ts
Don't use long descriptive text. Keep labels to 1–3 words.