Skip to main content

    HealthIndicator

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

    OverviewPropertiesUsage

    Import​

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

    Use cases​

    CodeSandbox

    Change the 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.

    CodeSandbox

    Custom visual representation​

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

    CodeSandbox

    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.

    CodeSandbox

    Usage of aria props​

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

    CodeSandbox
    Still have questions?
    Find answers in the Dynatrace Community