Tag Pill
Tag pills categorize articles by topic on the tinnitus information site. They appear on article cards and detail pages to help users quickly identify content areas like sound therapy, CBT, or sleep strategies. The pill shape and pale wheat fill keep them visually distinct from body text without competing for attention.
This component uses naluma design system tokens.
BEM class: .tinnitus-tag
Showcase
Section titled “Showcase”Tag Pills
Tinnitus CBT Sound Therapy Sleep Habituation
Single
Mindfulness
Pair
Research Hearing Loss
Many (flex-wrap)
Tinnitus CBT Sound Therapy Sleep Habituation Mindfulness Research Hearing Loss Stress Management Relaxation
Specifications
Section titled “Specifications”| Property | Value |
|---|---|
| Background | #F9DFAE (pale wheat) — --semantic-color-tag-background |
| Text color | #3D2E2A (warm dark) — --semantic-color-tag-text |
| Border radius | 9999px (full pill) |
| Padding | 4px 12px |
| Font size | 13px |
| Font weight | 400 (regular) |
| Font family | Plus Jakarta Sans, system-ui, sans-serif |
| Border | None |
Usage Guidelines
Section titled “Usage Guidelines”- Use consistent topic names. Stick to a fixed vocabulary of tags (e.g., “CBT” not “Cognitive Behavioral Therapy”) so users learn to recognize categories at a glance.
- Keep labels short. One or two words work best. Long labels break the compact pill shape and reduce scannability.
- Avoid using tags for status or priority. Tag pills communicate topic, not urgency. Use a different component for badges that convey state.
- Limit tags per article to 3—5. Too many tags dilute their usefulness and create visual clutter on article cards.