MetricCard

A compact card for one number with its label, context line and an optional change chip; the value rolls in like an odometer.

When to use

• KPI rows on dashboards: sessions, approval rate, items waiting for review.
• When a number needs a short explanation ("This month, all purposes") to be read correctly.
• Use AnimatedCounter on its own for an inline number, Sparkline when the trend shape matters, and Card for non-numeric content.

Usage

import { MetricCard } from "@/components/iris/metric-card/metric-card";

h(MetricCard, { label: "Sessions", value: 1284, context: "This month, all purposes", change: "+12%" });
h(MetricCard, {
  label: "Approval rate",
  value: 91,
  suffix: "%",
  context: "Last 30 days, all countries",
  change: "-2%",
});

Props

Prop	Type	Default	Description
label	string	— (required)	What the number measures.
value	number	— (required)	The figure. Formatted with en-US grouping and no decimals.
suffix	string	—	Unit after the value, e.g. "%". A leading space collapses, so " min" renders as min against the number.
context	string	— (required)	Short line under the value: period, scope or comparison.
change	string	—	Change chip. A leading + renders it as up (green), a leading - or − as down (red).

Notes

• The value rolls up from zero the first time the card scrolls into view, and later changes roll in the direction they moved.
• value is shown without decimals; round or rescale (e.g. seconds to ms) before passing fractional values.
• Changed label, context and change text rise in from the side the number moved; all motion collapses to a fade under reduced motion.
• Uses the theme's surface, line, ink, ink-2, ink-3, green and red, with shadow-resting and rounded-surface. The change chip reads only the sign: pick the label so that up means better, or leave change out.