HealthIndicator

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

OverviewProperties

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.

CodeSandbox

Usage on accentuated backgrounds

Set the variant prop to onAccent to correctly display the HealthIndicator on accentuated backgrounds.

CodeSandbox

Custom visual representation

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

CodeSandbox

Usage of aria props

Add the aria-label prop to the component if it's used stand-alone. In case you add a label or text to the HealthIndicator use the aria-labelledby prop and an id prop to connect the given label with the component.

CodeSandbox