Tag
Used for the selection, filtering, and classification of information. Users provide feedback and interact through tags.
Anatomy
Tag
1
2
1: Container
Mainly blue, green, orange, red, and gray, 5 colors.
2: Prefix icon
Default non-mandatory, can be replaced, indicating progress status
4: Text
There must be
3
Variant/Type
Semantic class labels
Tag
default
Tag
Success
Tag
Warning
Tag
Failure
Tag
End
Label with icons
Tag
Not started
Tag
In progress
Tag
Completed
Operational tags
Tag
default
Usage scenario
Tag
Tag
Tag
Scene description:
default Basic Functional Tags:
Used to display status information, representing different states using default, success, warning, failed, and end.
operational Operations Tags:
Used to display strong operational attribute information, rather than status information. It is recommended that no more than two appear on a single page.
Label
lg-24
md-20
sm-16
24px
20px
16px
Tag
Tag
Tag
Multilingual adaptation
新用户
New users
Instructions:
Prioritize concise copy
The tag length can be customized according to requirements; it is recommended that the copy does not exceed 16 characters
RTL
0 Fess
LTR
the rates
RTL
Usage
Tag
Tag
Tag
Do
Tag
Tag
Tag
Tag
Tag
Don't
The number of tags should not be too many, generally controlled at 3, and the colors should be no more than 2 to avoid excessive visual flamboyance.
新用户
Do
New Us...
Don't
Do not truncate the label content; it is important that users can easily understand what the label represents.
Tag
Tag
Tag
Do
Tag
Tag
Tag
Don't
Operational tags cannot appear simultaneously; they can be used along with basic default tags.