HealthIndicator

The HealthIndicator helps consumers to visualize the status of a resource.

OverviewPropertiesUsage

When to use

• Use HealthIndicators to communicate the status of a system, process, or object in a subtle and accessible way.
• Prioritize visualizing warning and critical statuses to avoid a cluttered interface that overwhelms users. For more details, see our Status and health guidelines.

Visual

HealthIndicators come with two visual variants: a subtle shape or a more prominent icon. Using them correctly helps to declutter the UI and direct the user's focus to the most important areas.

Shapes as visual

• Use shapes to visualize statuses in a subtle way that doesn't clutter the interface. They can be understood as minimal versions of status-indicating icons and draw less attention.
• Use shapes as secondary indicators to highlight 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.

Icons as visual

• Use icons to highlight essential statuses, such as health indicators next to an object title.
• To prevent visual overload, use an icon ideally once per context in the same view. If you need to highlight contributing factors to a more important status, use shapes instead.
• Accompanying the icon with a label is optional if the status can be easily interpreted by looking at its context. This usually requires close visual proximity between the two or good domain knowledge.
• Icons usually express a status in more detail than shapes. The symbol contained in icons carries an additional layer of information.

Customized visuals

• If you need to visualize a failed process using an icon, replace the icon with the WarningFailedIcon or CriticalFailedIcon, depending on the status.

• Never use color alone to differentiate between multiple statuses, as this is not considered accessible.
• Keep customized shapes and icons to a minimum, and use the ones that come with the HealthIndicator component as much as possible.
• If you need icons or shapes that are more specific to your use case, don't assign different meanings to already-defined icons and shapes. Stay true to the underlying concept of color, shape, and symbol usage, as documented in our Status and health guidelines.

Status

HealthIndicators come in five status levels.

Ideal

• Use the ideal status level to indicate successful processes or to reinforce that there are no issues and the resource is in a desired condition. For example, when something is active, stable, healthy, or connected.

Good

• Use the good status level to keep users informed about a situation without conveying concern or minor issues that don't require attention. For example, for ongoing processes, when something is monitored or has a low security impact.

Neutral

• Use the neutral status level to indicate that a process hasn't started or inform about a condition that is neither positive nor negative. For example, when something isn't set up, when there is no data, or when something is unmonitored or archived.

Warning

• Use the warning status level to indicate potential issues, non-critical failed processes, or when a critical status is about to be reached. For example, when something is unstable, needs attention, or has a medium security impact.

Critical

• Use the critical status level to indicate issues that require immediate attention or a situation that can lead to negative consequences. For example, an error, a failed process, when something is unhealthy, or has a high security impact.