Badge
Badge is a visual extension in the notification domain to direct the user to a new message.
1. Alike components
Badge are often confused with tags and alerts. The guidance below helps to clarify the difference.
| Badge | Tag | Alert | |
|---|---|---|---|
| When to use? | To notify changes. | To label multiple data entities into groups/sets. | To communicate important contextual information. |
| Can it be used to navigate user? | No | Navigate to see all the other data entities with same tag. | Use link or button inside the component. |
| Placement | Inline or on top | Inline or independent | Independent |
| Is the content a numeric value only? | Yes | Maybe | No |
| Is it deletable? | No | Maybe | Maybe |
2. How to pick a color
| notification | urgent | |
|---|---|---|
| When to use? | Use as default for notification. | Use when an action is needed immediately. |
| Importance | Not urgent | Very urgent |
| Persistance | Can be persistant. | Have to go away after action. |
3. How to place the badge
Do
Place on top right of a component when using type “on-top”.
Don't
Don’t place on top of a component when using type “beside”.
Do
Place on beside a component when using type “beside”.
Don't
Don’t place beside a component when using type “on-top”.