Skip to main content

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:

StatusPurpose
IdealUsed for successful processes or to reinforce that no issues exist. It indicates a desired result or condition.
GoodUsed 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.
NeutralUsed for inactive statuses and unessential information that shouldn't indicate a positive or negative condition.
WarningUsed 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.
CriticalUsed 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:

StatusKubernetes cluster healthSecurity riskProcess status
IdealHealthy-Completed
GoodMonitoredLowIn progress
NeutralUnmonitoredMutedNot started
Warning-Medium-
CriticalUnhealthyHighFailed

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 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 statuses of specific data points, use the chart status palette or the tokens listed below.

StatusUser interface colorsChart color tokenIndicates
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.

StatusShapeIndicates
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.

StatusShapeIndicates
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.

Examples of custom foundational building blocks that respect the existing defintions as do and ones that don't as don't. Examples of custom foundational building blocks that respect the existing defintions as do and ones that don't as don't.

StatusIndicator

Note

The StatusIndicator isn't available as a standalone component yet.

Some examples of StatusIndicator variants Some examples of StatusIndicator variants

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.

StatusIcon indicatorShape indicatorExamples
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.

An icon indicator next to a name in a table row An icon indicator next to a name in a table row

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.

Shape indicators with a label and shape indicators next to a metric in a table row Shape indicators with a label and shape indicators next to a metric in a table row

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

Note

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.

Example of a status highlight in a table row Example of a status highlight in a table row

Trend indicators

Note

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.

Examples of colored arrow icons next to metrics as trend indicators Examples of colored arrow icons next to metrics as trend indicators

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.

Indicators that use color in combination with a shape as do and indicators that only use colors to communicate a status as don't Indicators that use color in combination with a shape as do and indicators that only use colors to communicate a status as don't

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.

A table row with a decent amount of status indicators as do and too many status indicators as don't A table row with a decent amount of status indicators as do and too many status indicators as don't

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.

An page example with numerous status indicators that are based on the reading flow of the user An page example with numerous status indicators that are based on the reading flow of the user

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.

Chips in multiple colors that are used for statuses as examples Chips in multiple colors that are used for statuses as examples

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.

Chips with labels describing the status and no icons as do and the same with icons as don't. Chips with labels describing the status and no icons as do and the same with icons as don't.

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).

Chips with labels not describing a status and with icons as do and the same without icons as don't. Chips with labels not describing a status and with icons as do and the same without icons as don't.

Alert

Note

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.

An example of a primary colored alert that has a title and description An example of a primary colored alert that has a title and description

Use a StatusIndicator as a prefix to communicate the status level quickly. Don't rely on color alone if quick recognition is needed.

An example of a warning colored alert that has a status indicator icon prefix as do and the same without the icon as don't An example of a warning colored alert that has a status indicator icon prefix as do and the same without the icon as don't

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.

An alert that includes resolving actions below the description and a dismiss button An alert that includes resolving actions below the description and a dismiss button

InlineAlert

Note

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.

An example of an inline alert An example of an inline alert

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.

Example of a toast component in the bottom left of a screen Example of a toast component in the bottom left of a screen

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.

Example of an information overlay that with status details Example of an information overlay that with status details

Status in navigation

Note

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.

Still have questions?
Find answers in the Dynatrace Community