Badge
The logo or icon that appears in the upper right corner of the icon or text is used to inform users about the status changes in that area or the number of pending tasks.
Anatomy
1
1: Background container
There must be a container used to hold content.
2:text
It can be an icon or character, usually representing the number of unread messages or the type of status.
9
2
1
Variant/Type
Brand Color Badge (Status Type)
dot-brand
9
Standard Brand
Red Badge (Warning type)
dot-red
9
标准红
Type description:
Brand Color Badge: Conveys non-urgent but identifiable information such as status, category, tag, etc.
Status indicators in the interface (such as "icons" and "selection cards")
Red Badge: Used to indicate warnings, notifications, unread items, alerts, and other urgent matters or issues requiring immediate user attention.
Unread messages (Message Center)
System alerts (such as equipment failure, overdue tasks)
To-do items that need to be processed by the user
Layout adaptation
Small dot logo: without quantity labeling, reducing visual intensity. Used to remind content, functionality, status, or dynamic updates, with the display position centered horizontally and vertically relative to the upper right corner of the main subject.
Tab
Digital badge: With a quantity label, emphasizing the display of quantity, set to a maximum of 99+ according to the scenario, with the display position horizontally and vertically centered at the top right corner of the main object.
9
9
9
Tab
9
99+
99+
99+
Tab
99+
Label
dot
standard
9
99+
6px
16px
16px
RTL
LTR
RTL
Usage
99+
Do
123456788
Don't
Text content that needs to wrap, suggestions for length should be defined based on the scenario and type of information, and overly long text should be avoided. The box should always be aligned with the top of the text.
9
2
99+
Do
9
2
99+
Don't
Text content that needs to wrap, suggestions for length should be defined based on the scenario and type of information, and overly long text should be avoided. The box should always be aligned with the top of the text.
Logo
Badge
Tag
Notification badge
Corner badge