Four small labels, four different jobs — pick the name from the job, not the shape
Badge vs. Chip vs. Pill vs. Tag
/ Badge · <button> /
also called token, lozenge, capsule
A badge is a tiny count or status marker attached to another object. A chip is a compact interactive token that can be selected, edited, or removed; a pill describes the capsule shape rather than a strict behavior. A tag is usually non-interactive category metadata, so choose the term from its job rather than from rounded corners alone.
If you called it…
…you meant a badge vs. chip vs. pill vs. tag.
Anatomy — every part, named
- 1Badge anchor
Badge“The icon the little number bubble sits on” is the badge anchor.
- 2Badge count
Badge“The tiny number inside the red bubble” is the badge count.
- 4Selected chip state
aria-pressed“The filter pill that stays filled after I click it” is the selected chip state.
Prompt — paste into your agent
Use a Badge for the compact unread count, a dismissible Chip for the active filter, a fully rounded Pill for short status text, and a Tag for category metadata. Use shadcn/ui Badge for the non-interactive labels and give any icon-only remove button an aria-label.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my badge/chip/pill. Rule out: unbounded counts blowing the layout instead of capping at 99+; the pill wrapping mid-label without white-space nowrap; a chip delete target far smaller than 24px so taps miss; low-contrast fills failing in dark mode because the colors were not themed as a pair. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| shadcn/ui | Badge | |
| HTML | <button> | for a removable or selectable chip |
| ARIA | aria-label |