MetricCard
Metrics & Status

MetricCard

A single metric tile with label, value, color-aware delta arrow, optional sparkline, icon, and loading state.

Props

MetricCard extends HTMLAttributes<HTMLDivElement> (omitting onClick).

MetricCardProps props
PropTypeDefaultDescription
metricMetricDatum—Data object with label, value, delta, intent, etc.
variant"bordered" | "plain""bordered"Drops the border when plain.

MetricDatum fields:

MetricDatum props
PropTypeDefaultDescription
labelReactNode—Metric name above the value.
valueReactNode—The headline number or string.
unitReactNode—Small label after the value.
deltanumber—Period-over-period change. Sign drives the arrow.
formatDelta(delta: number) => string—Custom formatter. Defaults to signed percentage.
intent"positive" | "negative" | "neutral"—Color of the delta. Defaults to sign-based inference.
captionReactNode—Dim caption under the value.
sparknumber[]—Trend series shown as a mini sparkline.
sparkColorstring—Override sparkline color.
iconReactNode—Leading icon in the label row.
loadingboolean—Renders muted with a shimmer.
onClick() => void—Makes the card clickable.

Examples

Positive delta

MetricCard positive delta

Negative delta with intent

MetricCard negative delta

Flat (no change)

MetricCard flat delta

With sparkline

MetricCard with sparkline

With icon

MetricCard with icon

Loading

Revenue
MetricCard loading

Bordered vs plain

MetricCard variants
ImportTSX
import { MetricCard } from "@solarius/onset";
import type { MetricDatum, MetricCardProps } from "@solarius/onset";