Tag
Tags contain keywords for associating data sets that cross-link different information.
1. Alike components
Tags are often confused with badge and alerts. The guidance below helps to clarify the difference.
| Tag | Badge | Alert | |
|---|---|---|---|
| When to use? | To label multiple data entities into groups/sets | To notify changes. | To communicate important contextual information. |
| Can it be used to navigate user? | Navigate to see all the other data entities with same tag. | No | Use link or button inside the component. |
| Placement | Inline or independent | Inline or on top | Independent |
| Is the content a numeric value only? | Maybe | Yes | No |
| Is it deletable? | Maybe | No | Maybe |
2. Meaning of colors
Among the 6 colors, information, branded, and neutral colors often overlap in their meanings. Here is a guide to help designers to pick colors.
| Informational | Neutral | Branded | |
|---|---|---|---|
| When to use it? | To gain attention on an informational data. | Present informational data without shouting for attention. | Needs extra attention an informational data related to a feature. |
| Intend to emphasize the information? | Yes | No | Yes |
| Is data VTS product feature related? | No | No | Yes |
3. What to put in the tag
Please provide informational and concise copy within the tag.
Do
Present data itself.
Don't
Don’t put in a sentence.
Do
One information per tag.
Don't
Don’t put multiple information in a tag.
Do
Use sentence case.
Don't
Don’t use all cap.
Do
Include unique contextual information.
Don't
Don’t add repetitive information included on a different level.