That's a really good question. I searched for clear definitions, but it seems there's not one...
Atlassian calls it Lozenge while Material calls it Chips. These terms are used interchangeably and are mostly based on the design system naming flavors - I think.
However, I found two pages that may help us define & stick to one naming system, at least from now on!:
- https://www.w3.org/2021/03/04-openui-minutes.html#r01
- https://blog.prototypr.io/design-guide-classifying-items-db5b121985d
I can conclude that:
- Tag: It isn't a UI component; it is a general concept about organizing data. It can be a Pill, a # (like Instagram), a color (like iOS files)...
- Token: The term is used many times in the backend for security keys (tokens). We also have "Design Tokens" which point to colors, typography, iconography and so on. Don't bring it into play, please :-]
- Badge: It's referred to the Notification counter above App icons (& another icons as well). In most cases, badge is a simple red dot with a number inside, placed on the upper-right of the icon.
- Label: It's mostly used in forms to show what should be entered in the corresponding input. Calling another component "Label" causes a huge confusion. Also,
htmlhas alabeltag which is for labeling inputs and checkboxes. - Pill: A rectangle (with any
border-radiusfrom 0px to 100%) that visualizes a Tag. It may have an "x" button to delete the Pill. It may have an icon or an image (like buttons do) - Lozenge: - Same as Pill -
- Chips: - Same as Pill -
Final Decision
Since I couldn't find a single source of truth, I will use this - my own naming convention - for my projects.
I encourage you to give your opinions, and we will find a standard together!
- Tag: Not a component
- Label: Label text for inputs and checkboxes
- Badge: Notification Counter above an icon
- Token: Not a component
- Pill: The rectangular - rounded or not-rounded - component. Can have an icon or an image. Can have a "x" button to delete itself. Can act like a button to filter items or open a new page.
Chips & Lozenge are the same as the Pill, but I chose the term "Pill" because it is...
- easier to type/read
- visually related to the medicine!
How is Pill different from the Button if it can execute functions or open a new page?
Well, the Pill keeps its tagging hypostasis even if it acts like a button, but a button has nothing to do with organization and filtering.
See the above screenshot from Notion; pills are used in a table to "tag" rows. Imagine clicking/tapping the "tag b" badge on a row will open a new page containing info about this tag. (a similar example is clicking a hashtag on Instagram which opens a new page, showing posts tagged with the same name)
Again, I encourage you to share your thoughts and help reach a standard.