Counter badges are used to indicate that there is a notification and display the number of notifications. It is an update message that announces something new for the user to see. Badges are typically used to indicate a new message.
TODO: Not yet written.
Use Tag when you need to inform users about the status of an object, about an action or when you have data that helps
categorize and organize things.
The badge consists of:
- Dot indicator: shows that there is a notification
- Count: displays the number of notifications
- Container: the rectangle with the number in it
None.
- Dot: color Red/3, border color white
- Count: text color Grey/4
- Container: fill color Grey/1
- Dot: overlaps container 25%, border 2px, height and width 8px
- Count: padding-inline 6px, padding-block 4px
- Container: height 24px
TODO: Not yet written.
None.
Badges should:
- Be hidden when count is 0
- Have a maximal count of 999. Once you reach higher than 999, the label becomes "999+".
- Be used for counts of important information, close to the relevant item.
- Notify or draw attention to changed values or states
- Be used when there is an underlying message in the menu
- Be used sparingly
Dot indicators should:
- Not be used if you need a text label. Use
Taginstead.