8

Since all the below components looks similar, what is the difference between Pills, Chips and Tags/Tokens. Since, am confused where/when to use these components.

enter image description here

enter image description here

enter image description here

1

The short answer: they have different shapes.

The (only slightly) longer answer: The tags in your question are not the UI device shown but the data they contain - in other words they could be described as 'Pills' or 'Chips' representing tags used to label data.

  • I'd add that "tags" can also represent the UI device as well as the data - as a metaphor representing a luggage tag or label attached to the object. This is often carried through in the visual representation of the concept. In the examples included in the question, the second and fourth examples are mimicking physical luggage tags. – Adrian Long Aug 16 '16 at 11:01
  • All these are names used by various design systems to identify the components they designed. you can categorize them based on the functionality of these components rather than just the names. tags are used to identify data sets and pills are labels that provide additional status of an element/feature. Chip is a material design term. similar answer can be found here: ux.stackexchange.com/questions/103820/… – Sooraj MV Sep 6 at 8:18
1

Chips is used to represent the complex entities in small blocks such as contact details. This may contain entities suh as photo, text, icon etc enter image description here

There is only difference of representation in between pills or chips otherwise both can be used for same purpose and yes, The "tags" are data which is cotained by chips or pills not the UI.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.