Return to Answer

• 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 add it to the game, 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, html has a label tag which is for labeling inputs and checkboxes.
• Pill: A rectangle (with any border-radius from 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 -

• 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, html has a label tag which is for labeling inputs and checkboxes.
• Pill: A rectangle (with any border-radius from 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 -

Again, I ask you to give share your thoughts and help reach a standard!

Again, I encourage you to share your thoughts and help reach a standard.

Chips & Lozenge are the same as the Pill, but I chose the term "Pill" because it is...

Chips & Lozenge are the same as the Pill, but I chose the term "Pill" because it is...

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 ask you to give share your thoughts and help reach a standard!