Status and health
- Reference
- 10 minutes
A status describes the condition or health of a system, process, or object. A consistent approach to showing status in the user interface helps users see what's happening, assess whether they need to act, and respond accordingly.
Status levels
Statuses are classified into five universal levels ranging from positive to negative:
| Status | Purpose |
|---|---|
| Ideal | Used for successful processes or to reinforce that no issues exist. It indicates a desired result or condition. |
| Good | Used for informative messages, items that need to stand out, or minor issues that don't require attention. It helps to keep users informed without conveying concern. |
| Neutral | Used for inactive statuses and unessential information that shouldn't indicate a positive or negative condition. |
| Warning | Used for potential issues or when a critical status is about to be reached. It indicates non-critical situations or unessential failed processes that users must know. |
| Critical | Used for critical issues that require immediate attention. It indicates a problematic situation or a failed process that can lead to negative consequences. |
Mapping
The universal status levels allow different mappings for contexts and use cases. Based on this mapping, the correct status indicator can be applied in each situation. Here are some mapping examples:
| Status | Kubernetes cluster health | Security risk | Process status |
|---|---|---|---|
| Ideal | Healthy | - | Completed |
| Good | Monitored | Low | In progress |
| Neutral | Unmonitored | Muted | Not started |
| Warning | - | Medium | - |
| Critical | Unhealthy | High | Failed |
Visualizing status
We use color, shape, and symbols as foundational building blocks for indicators to ensure that similar status levels are visually consistent. Enabling users to understand the required level of attention, no matter in what form or context the status is communicated.
Colors
The assigned colors to status levels stem from universal mental models. For example, we use red when something goes wrong and green when something goes well.
By reusing the user interface colors, we ensure that status indicators go hand in hand with other components, such as critical colored Buttons and Containers. When you use data visualization components such as charts to indicate the statuses of specific data points, use the chart status palette or the tokens listed below.
| Status | User interface colors | Chart color token | Indicates |
|---|---|---|---|
| Ideal | Success color tokens or component variants | Colors.Charts.Status.Ideal.Default | Something is or went well |
| Good | Primary color tokens or component variants | Colors.Charts.Status.Good.Default | Additional information, New features, Not concerning |
| Neutral | Neutral color tokens or component variants | Colors.Charts.Status.Neutral.Default | Unknown, Undefined, Inactive |
| Warning | Warning color tokens or component variants | Colors.Charts.Status.Warning.Default | Potential or upcoming issues |
| Critical | Critical color tokens or component variants | Colors.Charts.Status.Critical.Default | Something went wrong and needs immediate attention |
Shapes
Easily distinguishable shapes ensure accessibility and quick recognition, especially in smaller sizes in the user interface. Each shape has an assigned meaning and can be combined with other building blocks. For example, status-indicating icons utilize shapes combined with symbols.
| Status | Shape | Indicates |
|---|---|---|
| Ideal, Good, Neutral | Circle | Neutrality, Continuity, Completeness |
| Warning | Triangle | Warning, Caution, Potential issues |
| Critical | Diamond | Danger, Critical states |
Symbols
The symbols used for indicating statuses come with universally known meanings and can usually be seen in status-indicating icons. They serve as an additional information layer to the color, shape, and help communicate specific statuses. For example, a general critical situation vs. a critical status because something failed.
| Status | Shape | Indicates |
|---|---|---|
| Ideal | Checkmark | Something went well |
| Good | Info | Additional information |
| Neutral | Slash | Not existing, Inactive, Not available |
| Warning, Critical | Exclamation Mark | Something needs attention |
| Warning, Critical | X / Cross | Failed processes |
Customization
Keep your custom building blocks to a minimum and use the ones defined in this foundational concept as much as possible. However, if you need to use your own color, shape, or symbol to build indicators that are more specific to your use case, there are a few things to consider:
- The already existing building blocks should always keep their intended meaning. For example, don't repurpose the cross when something is unavailable or use the circle for critical states.
- Ensure that your custom, additional building blocks are distinguishable from existing ones.
- Don't add custom building blocks with the same or a similar meaning to the already defined ones to avoid confusion.
Accessibility
To create an accessible, inclusive, and enjoyable experience for every user on the platform, you should follow the AA level of the WCAG 2.1 accessibility guidelines. Therefore, never use color alone to convey information (see success criterion 1.4.1).
Make sure that, if you indicate statuses with colors, they're always accompanied by either:
- Icons
- Shapes
- Text
- Multiple of the listed elements
Additionally, use the aria-label attribute for icon-only and shape-only indicators to ensure accessibility for screen readers.
When to show status
Status indicators help you guide the users' attention and highlight the most essential information in your app. You should take into account the following points when communicating statuses:
- Always include them when communicating warnings and critical statuses. It will help users to make informed decisions, to respond to issues accordingly, and to assess whether they're required to act.
- Indicating ideal statuses can help to reassure users that everything is okay.
- Be aware that over-communicating statuses can overwhelm users and may cause frustration. Try to reduce the number of indicators you're using and only highlight the most important information required to understand the context.
- Always prioritize negative over positive statuses to convey crucial information first.
Communicating status changes
Statuses might change over time due to user actions or something happening on a system level.
- Use the Toast component to inform users about important status changes. Keep in mind that Toasts will draw users' attention away from their actual task, so use them sparingly and only if users must know about a status change.
- Otherwise, updating existing status indicators without actively informing users is usually enough.
Where to show status
Show status indicators in a way that supports the reading flow of users. Placing status indicators on the top left of a page or element will likely aid your users' in discovering them rather than putting them on the bottom right.
If status indicators refer to a whole section of an app, show them at the very top above other content in that section, ideally right next to the heading. It will ensure they aren't lost between other content and are easy for users to discover.
If a status indicator refers to a specific element in the user interface, place it in close proximity to that element.
Status related components
HealthIndicator
HealthIndicators allow you to quickly communicate the status of a system, process, or object in a subtle and accessible way. They either come with a shape or icon as visual. For more details, see the HealthIndicator usage guidelines.
Chip
Chips allow you to prominently tag objects or processes to inform users about their status. For more details, see the Chip usage guidelines.
MessageContainer
MessageContainers allow you to communicate important conditions, statuses, or changes related to the current section or page. For more details, see the MessageContainer usage guidelines.
Toast
Toasts allow you to notify users about a status change. For more details, see the Toast usage guidelines.
InformationOverlay
InformationOverlays allow you to add detailed status information in a contextual overlay. The trigger is usually a status-indicating icon with a label. For more details, see the InformationOverlay usage guidelines.
Other indicators
Status highlights
Status highlights aren't available as standalone components.
Status highlights allow you to add additional visibility to the status of an object with the help of a colored vertical line. They're commonly used to highlight table rows or items in a list of cards, such as outliers that require immediate attention.
Status highlights must be accompanied by other status indicators nearby to be considered accessible.
Trend indicators
Trend indicators aren't available as standalone components.
Trend indicators allow you to communicate positive or negative changes in data points. They're often used next to deltas or when comparing a current value to a previous one. Trend indicators are intended for reporting purposes; don't use them for predictions.
Remember that using color alone to indicate whether, for example, an upward trend is positive or negative isn't considered accessible. However, the context or suffixed label should make it clear in most cases.
