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.
Add a comment
|
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.
answered Aug 16 '16 at 10:22
-
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 '19 at 8:18
Chips are used to represent complex entities in small blocks such as contact details. This may contain entities such as photo, text, icon etc
There is only a difference in representation between pills or chips otherwise both can be used for same purpose and yes, The "tags" are data which is contained by chips or pills not the UI.
-
1In more recent Material Design documentation it sounds like Chips are used for actions and for filtering, not just for displaying information. – Old account Dec 8 '19 at 2:08
