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.
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.
- 3Chip remove button
<button aria-label>“The little x inside the filter pill” is the chip's remove button.
- 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.
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 |