Tag
Use the tag component to show users the status of something.
Examples
Default tag
Completed
Coloured tags
Tags can be given different colours to help distinguish between different categories or states.
| Colour | Example |
|---|---|
| Grey (default) | Inactive |
| Blue | New |
| Turquoise | Active |
| Green | Approved |
| Yellow | Pending |
| Orange | Warning |
| Red | Rejected |
| Pink | Important |
| Purple | Priority |
| Light Blue | Information |
Use case example
Tags are commonly used to show status in tables or lists:
| Application ID | Status |
|---|---|
| APP-001 | Approved |
| APP-002 | Pending |
| APP-003 | Rejected |
| APP-004 | New |