The status indicator is strictly informational and non-interactive. They provide quick visual cues through color and iconography to represent current statuses like "Success," "Warning," or "Error."
Anatomy
- Container: Small and pill-shaped container.
- Status Icon: A mandatory icon (e.g., checkmark, exclamation) to ensure accessibility for color-blind users.
- Label (Optional): Short text describing the status.
Interactivity & Behavior
Status indicators are strictly non interactive.
If you need a status indicator with an interactivity, please use a tag with a specific color and icon.
Variants
Tags are available in two emphasis and a reduced number of colors to indicate the status.
Emphasis
- Low: No background and a small border.
- Medium: Light background wiith a contrasting color for the content.
Status
|
# |
Status |
Color |
Iconography |
|---|---|---|---|
|
1 |
Sucess |
Green |
Validated, Checkmark, V, Positive icons |
|
2 |
Error |
Red |
Cross, X, Low, Arrow down, Negative icon |
|
3 |
Warning |
Yellow |
Triangle, Warning, Stop, Negative icons |
|
4 |
Information |
Blue |
Info, Informative & Neutral icon |
|
5 |
Neutral |
Grey |
Depends on context, Neutral icon |
Usage
When to use
- System States: To show the current condition of an object (e.g., "Validated", "In Progress", "Failed").
- Static Feedback: When the user needs to know a result that doesn't require an action (e.g., "Active" subscription).
- Navigation/Filtering: If the element needs to be clicked or removed, use a Tag or Chip.
- Selection: If the user needs to toggle a state, use a Chip.