KPICard

DASHBOARD

Key performance indicator card with value, label, and trend arrow.

[EXAMPLES]

With Trend

[PROPS]

PROPTYPEDEFAULTDESCRIPTION
titlestringKPI label (renders UPPERCASE)
valuestring | numberDisplay value
changenumberPercentage change number
trend"up" | "down" | "neutral"Trend direction arrow
iconReactNodeOptional icon

[ACCESSIBILITY]

ARIA

  • >Semantic card structure
  • >Trend communicated via text and icon