Loading navigation…
User
API and Development
MetricCard is exported from @prepared911/ui-core. It composes CardHeader and CardContent. It does not export MetricValue, MetricChange, or private chrome helpers.
Name | Type | Default | Description |
|---|---|---|---|
|
| — | Localized metric name shown in the card header. |
|
| — | Numeric value to format and optionally animate. |
|
| — | — |
|
| — | — |
|
| — | Accessible name for the action target. |
|
| — | Interactive header controls forwarded to CardHeader.controls. |
|
| — | — |
|
| — | Intl options forwarded to localized |
|
|
| Semantic heading rank for the header title. The title always uses BodyLarge strong typography. |
|
| — | — |
|
| — | — |
|
| — | Activates the stretched card action target. |
|
| — | Maps to |
|
| — | Optional localized supporting copy under the value. |
|
| — | Decorative trailing visual. Mounted |
Interactive examples and edge cases for this component are in Storybook.
| Name | Type | Notes |
|---|---|---|
label | LocalizedMessage | Required. Rendered as CardHeader title. |
value | LocalizedMessage or number | Always NumericDisplay (2.4rem) with tabular figures, rendered as a span. Numeric values use formatNumber. Prelocalized messages skip number formatting and animation. |
subtitle | LocalizedMessage | Optional. |
formatOptions | Intl.NumberFormatOptions | Numeric values only. |
headingLevel | HeadingLevel | Optional. Semantic rank for the header title. Default HeadingLevel.H3. Does not change value typography. |
animation / announcement | see below | Opt-in value odometer via AnimatedNumber. |
delta | MetricCardDelta | Mutually exclusive with trailing. Optional visual-only delta animation. |
trailing | ReactNode | Decorative, aria-hidden, 2.8rem box. Omitted when unset or a boolean. Forbidden when delta is set. |
loading | boolean | Requires loadingLabel. |
controls | ReactNode | Forwarded to CardHeader.controls. Mutually exclusive with clickable props. |
onClick / selected / aria-label | see interaction | Activates the stretched card action target. Requires all three when clickable. |
Numeric values may opt into AnimatedNumber:
animation.from and animation.duration control the entrance reel.animation.live={AnimatedNumberLive.Polite} requires localized announcement.Delta magnitudes accept visual-only animation without polite live regions.
Direction and tone are separate fields. Direction selects the arrow; tone colors the delta label and arrow fill only.
direction | Arrow | Magnitude | Tone |
|---|---|---|---|
Increase / Decrease / Unchanged | Yes | Required numeric value | Required |
Introduced / Unavailable | No | Unrepresentable | Unrepresentable; use label |
There is no card-level tone or statusLabel.
Use ChartFamilyDemos on the visualization-charts page. MetricCard trailing is aria-hidden; the label and value are the equivalent. Do not pass trailing when delta is set.