HealthIndicator

Use the HealthIndicator to communicate the status of a system, process, or object using semantic color and visual shape or icon indicators.

OverviewPropertiesUsage

Import

import { HealthIndicator } from '@dynatrace/strato-components/content';

Demo

Change status and visual

Use the status and visual prop to create the different contextual indicator variants. When HealthIndicator is used within an accentuated Container, it automatically uses the on accent text color of the color defined on the HealthIndicator.

Custom visual representation

Use the HealthIndicator.Visual component to customize the visual representation of the indicator.

Label

The HealthIndicator.Label component allows you to render custom labels using both inline and block-level elements.

Note: Be careful when using a different line height than the base line height. If you use Heading or Text with a small textStyle, ensure you place the HealthIndicator inside the Heading or Text to maintain proper line height alignment.

Usage of aria props

Add the aria-label prop to the component if it's used without a label.