Prepared Docs

MetricCard presents one metric. The value is not a heading. Threshold meaning lives on the delta: the arrow glyph plus the delta text, not color alone.

What the component handles

Loading exposes exactly one visible role="status" and aria-busy. Skeleton geometry sits in one aria-hidden cluster.
Trailing content is aria-hidden.
The header title uses CardHeader semantics. Override rank with headingLevel; default is HeadingLevel.H3.
The value renders as NumericDisplay in a span, not a heading element.
Tone never colors the large value. Only the delta label and arrow fill take tone.
Animated values delegate to AnimatedNumber: reel motion is hidden; polite announcements require localized copy on the value only.
Clickable tiles expose one stretched button with aria-label and optional aria-pressed. Selected clickable tiles expose aria-pressed; header controls stay outside the action target.
Header controls render outside the action target radiogroup.

What you must provide

Localized label.
Localized loadingLabel whenever loading is true.
Localized label on introduced and unavailable deltas.
Localized directionLabel on increase, decrease, and unchanged magnitude deltas. The delta region exposes this text to assistive technology; the arrow stays decorative (aria-hidden).
Localized aria-label whenever onClick is set.
Localized announcement when the value uses animation.live={AnimatedNumberLive.Polite}.

Keyboard behavior

Static tiles have no tab stop.
Clickable tiles expose one tab stop on the stretched action target. Activation follows native button behavior.
Header controls follow CardControls and SegmentedControl keyboard contracts.

Metric Card / API and Development

Modal / Usage

What the component handles

What you must provide

Keyboard behavior

Related Components

MetricCard presents one metric. The value is not a heading. Threshold meaning lives on the delta: the arrow glyph plus the delta text, not color alone.

What the component handles

Loading exposes exactly one visible role="status" and aria-busy. Skeleton geometry sits in one aria-hidden cluster.
Trailing content is aria-hidden.
The header title uses CardHeader semantics. Override rank with headingLevel; default is HeadingLevel.H3.
The value renders as NumericDisplay in a span, not a heading element.
Tone never colors the large value. Only the delta label and arrow fill take tone.
Animated values delegate to AnimatedNumber: reel motion is hidden; polite announcements require localized copy on the value only.
Clickable tiles expose one stretched button with aria-label and optional aria-pressed. Selected clickable tiles expose aria-pressed; header controls stay outside the action target.
Header controls render outside the action target radiogroup.

What you must provide

Localized label.
Localized loadingLabel whenever loading is true.
Localized label on introduced and unavailable deltas.
Localized directionLabel on increase, decrease, and unchanged magnitude deltas. The delta region exposes this text to assistive technology; the arrow stays decorative (aria-hidden).
Localized aria-label whenever onClick is set.
Localized announcement when the value uses animation.live={AnimatedNumberLive.Polite}.

Keyboard behavior

Static tiles have no tab stop.
Clickable tiles expose one tab stop on the stretched action target. Activation follows native button behavior.
Header controls follow CardControls and SegmentedControl keyboard contracts.

Metric Card / API and Development

Modal / Usage

What the component handles

What you must provide

Keyboard behavior

Related Components