Tag
Used to indicate the category, property, or status of the subject.
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
Neutral
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
Label length is customized according to needs; it is recommended that the copy does not exceed 10 characters
RTL
0 Fess
LTR
the rates
RTL
Usage
Tag
Tag
Tag
Do
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.
Tags, categories, keywords, marks, topics