Design
Web component
Is documented
Status
Healthy
Figma component
Principles
Use when
- to display and filter items or content based on category or status.
- mapping multiple contents or distinguishing between different items/records.
Don't use when
- listing an item over on input or overflow menu.
Structure
- Container
- Tag label
- Icon
Properties
Status
|
Success |
It can be used in any message where the success of an action or record is desired to be conveyed. |
|---|---|
|
Pending |
It can be used when the record desired to convey that a process is in a pending state etc. |
|
Error |
Its preferred use is when a record encounters an error as a result of any action. |
|
Information |
This variant preferred when the context is likely to be more informational. |
Attribute
Background (boolean)
The background is needed when the tag needs to be separated visually from the nested component (e.g table or structured list).
Icon (boolean)
An icon can be used to convey the message and clarify the statuses data or records.
Positioning
Semantic tags should be placed in cards, structured list's and table row's cells.
Figma source