Status and health
A status describes the condition or health of a system, process, or object, whereas a status indicator is a visual representation of it. Ideally, it helps users make informed decisions, respond to issues accordingly, and assess whether they need to act.
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 |
Indicators
Foundations
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 color palettes, 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 color tokens listed below.
| Status | User interface colors | Chart color token | Indicates |
|---|---|---|---|
| Ideal | Success palette | Colors.Charts.Sequential.Turquoise.Color03.Default | Something is or went well |
| Good | Primary palette | Colors.Charts.Sequential.Blue.Color03.Default | Additional information, New features, Not concerning |
| Neutral | Neutral palette | Colors.Charts.Sequential.Grey.Color03.Default | Unknown, Undefined, Inactive |
| Warning | Warning palette | Colors.Charts.Sequential.Yellow.Color04.Default | Potential or upcoming issues |
| Critical | Critical palette | Colors.Charts.Sequential.Red.Color03.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.
StatusIndicator
The StatusIndicator isn't available as a standalone component yet.
The StatusIndicator allows you to communicate statuses in a simple and accessible way. It combines all aspects of the foundational concept and can be used standalone, in more advanced components like Toasts, or for navigational purposes.
The component has an optional label and a colored icon or shape as a prefix. The label doesn't usually adopt the indicator color to prevent visual overload when showing many instances in the same view.
| Status | Icon indicator | Shape indicator | Examples |
|---|---|---|---|
| Ideal | Stable, Active, Complete, Successful, Connected, Healthy | ||
| Good | Additional information, New features, Monitored, Low security impact | ||
| Neutral | Inactive, Archived, No connection, No data, Not available, Not set up, Unmonitored, Muted | ||
| Warning | Unstable, Caution, Potential issues, Non-critical failed process, Attention, Warning, Medium security impact | ||
| Critical | Problematic, Error, Failed process, Unhealthy, High security impact |
Icons as indicators
Use status-indicating icons to highlight essential statuses, such as status indicators next to an object title. Everything contributing to this object's status that needs pointing out should be indicated with a shape instead.
Icons are visually more prominent than shapes and can express a status in more detail due to the symbol they contain. Ideally, they should only be used once per context in the same view to prevent visual overload.
Icons as status indicators don't need to be explicitly labeled if they can be easily interpreted by looking at the object they refer to. Usually, this requires close visual proximity between the two or good domain knowledge.
Shapes as indicators
Use shapes as subtle visual hints for statuses without drawing too much attention. They can be understood as minimal versions of status-indicating icons and are tools for managing cognitive overload. Sometimes, they act as secondary indicators highlighting contributing factors for a more important status.
Always use shapes combined with a label to ensure their meaning is clearly understood. This can either label the status itself or be text that provides enough context to interpret the meaning of the status indicator.
StatusIndicator customization
Try to keep customized status-indicating shapes and icons to a minimum and use the ones that come with the component as much as possible. However, if you need more scoped indicators in your context, the StatusIndicator component allows you to change the displayed icon or shape.
Never assign different meanings to already defined icons and shapes, and stay true to the underlying concept of color, shape, and symbol usage as documented under foundations. Refer to the foundations customization for more guidelines.
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. Each must accompany other status indicators nearby to be considered accessible.
Using Status highlights is common to emphasize table rows or items in a list of cards. Usually, only the outliers, such as the rows requiring immediate attention, are highlighted.
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 future predictions.
Use arrow icons instead of chevrons for trends to avoid potential confusion with certain StatusIndicators.
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.
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.2 accessibility guidelines. Following these guidelines, we mustn't solely use color as the only visual means of conveying 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. You can use the Toast component to inform users about such a status change. Be aware that this will draw the users' attention away from their actual task, and therefore, use it sparingly and only if users absolutely need to know about a status change. Otherwise, it's enough to update status indicators without informing users.
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
Additionally to the indicators, the following components can be used to communicate a status. They're based on the foundations and can be paired with a StatusIndicator if needed.
Chip
The Chip component allows you to prominently tag objects or processes to inform users about their status. You can use the emphasized or the accent variant, depending on how prominent you want to display the status.
Whenever possible, use clear and concise labels to indicate statuses. Don't use an additional icon in Chips if you're already describing the status with the label.
If you use the label for something else, for example, to describe a context or for a count, use an icon as a prefix to clarify the status. Color isn't enough to convey meaning (refer to the accessibility guidelines for more information).
Alert
The Alert isn't available as a standalone component yet. However, you can use existing components as parts to assemble it.
The Alert allows you to communicate statuses prominently. Usually, we use them as part of a section and when a more detailed status description is needed.
Use a StatusIndicator as a prefix to communicate the status level quickly. Don't rely on color alone if quick recognition is needed.
Alerts are either persistent or dismissible. Both versions should disappear if a situation resolves or the status becomes irrelevant.
If needed, provide actions to help users take the following steps or resolve an issue.
InlineAlert
The InlineAlert isn't available as a standalone component yet. However, you can use existing components as parts to assemble it.
The InlineAlert is a visually toned-down version of the Alert. Use it to inform users about a status within other components or user interface parts. In contrast to the Alert, you can't dismiss it manually, and it can't contain additional actions.
Toast
The Toast allows you to inform users about a status change. Be aware that its appearance is very prominent and will distract users from their current tasks. For this reason, use it sparingly and only if users absolutely need to know about a status change.
InformationOverlay
The InformationOverlay allows you to hide related information behind a trigger. The trigger is usually a status-indicating icon or a combination of an icon with a label. Use it to show detailed status information without cluttering the user interface.
Status in navigation
Soon, we will implement the required slots to visualize a status in navigational components. Once available, this section will describe displaying status in Tabs, ToggleButtonGroups, AppHeader, and TreeNavigation.