Skip to main content

HealthIndicator

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

    OverviewPropertiesUsageChangelog

    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.

    Still have questions?
    Find answers in the Dynatrace Community