Metrics & Status
Components

Metrics & Status

KPI tiles, meters, gauges, progress indicators, trend badges, status markers, tags, and avatars for dashboards.

Components in this category

KpiCard

Key performance indicator card with trend sparkline.

MetricCard

Single metric with label, value and trend indicator.

MetricGrid

Grid layout for MetricCards.

Meter

Gauge-like meter with thresholds.

UsageBar

Horizontal usage bar with percentage and threshold.

Gauge

Semi-circular gauge with value and range.

ProgressBar

Horizontal progress bar with tone and label.

ProgressCircle

Circular progress indicator.

TrendBadge

Up/down/flat trend indicator with color.

UptimeStrip

Horizontal strip of uptime status segments.

StatusDot

Small colored dot for status indication.

StatusText

Text with status dot prefix.

StatusBadge

A state in a container, for headers and toolbars.

Tag

Small label for categorization.

Token

Compact chip for a single input value.

FilterChip

Toggleable chip for filter UI.

CountBadge

Numeric badge for counts and notifications.

Avatar

User avatar with fallback to initials.

AvatarGroup

Overlapping avatar stack with overflow count.

KPIs & metrics

Dashboard headline numbers with optional trend indicators and sparklines. KpiCard shows a label, a value, and a sparkline. MetricCard adds a delta with color-coded intent, so a rising number can render green or red depending on whether an increase is good (intent defaults to sign-based inference). MetricGrid arranges them in a responsive auto-fit row.

KpiCard

KpiCard props props
PropTypeDefaultDescription
labelReactNode—Stat label above the value.
valueReactNode—Headline number.
unitReactNode—Trailing unit (GB, req/s, …).
subReactNode—Dim line under the value.
subTone"default" | "warn""default"Tone for the sub line.
sparknumber[]—Trailing sparkline series.
sparkColorstring—Sparkline color override.
KpiCard exampleTSX
<KpiCard
  label="Requests"
  value="1,423"
  unit="/min"
  sub="+12% vs last hour"
  spark={[10, 14, 23, 18, 27, 42, 35, 28]}
  sparkColor="var(--m-color-primary)"
/>
KpiCard

MetricCard

MetricCard props props
PropTypeDefaultDescription
metricMetricDatum—A single metric record.
variant"bordered" | "plain""bordered"Drop the border for cards inside a bordered panel.
MetricDatum fields props
PropTypeDefaultDescription
labelReactNode—Stat label.
valueReactNode—Headline number.
unitReactNode—Trailing unit.
deltanumber—Signed change; sign drives arrow, intent drives color.
formatDelta(d: number) => string—Formats the delta. Default: signed percentage.
intentMetricIntent—"positive" | "negative" | "neutral". Explicit override for when up is bad (error rate, cost).
captionReactNode—Dim label under the value.
sparknumber[]—Trend sparkline.
sparkColorstring—Sparkline color override.
iconReactNode—Leading icon.
loadingboolean—Shimmer placeholder.
onClick() => void—Makes the card clickable.
MetricCard

MetricGrid

MetricGrid props props
PropTypeDefaultDescription
metricsMetricDatum[]—Metrics to render.
columnsnumber—Fixed column count. Omit for auto-fit.
minColumnWidthnumber150Minimum tile width when auto-fitting.
variant"bordered" | "plain"—Passed through to each MetricCard.
connectedboolean—Removes gaps and adds borders between metrics.
MetricGrid

Meters & gauges

Quantity-at-a-glance readouts. Meter and UsageBar are thin horizontal bars for quota or inline table-cell usage. Gauge is a larger semi-circular arc for a headline attainment number.

Meter

Meter props props
PropTypeDefaultDescription
valuenumber—0-100 fill.
Meter

UsageBar

UsageBar props props
PropTypeDefaultDescription
valuenumber—0-100 fill.
tone"default" | "ok" | "warn" | "high""default"Color tone. 'high' is the red alarm.
UsageBar

Gauge

Gauge props props
PropTypeDefaultDescription
valuenumber—Percentage from 0 to 100. Normalize other value ranges before passing them.
sizenumber132Overall width in px.
strokeWidthnumber9Arc thickness.
toneProgressTone"primary""primary" | "ok" | "warn" | "err".
targetnumber—Threshold marker on the arc.
childrenReactNode—Center readout override.
subReactNode—Dim line under center value.
startLabelReactNode—Left label under arc end.
endLabelReactNode—Right label under arc end.
Gauge exampleTSX
<Gauge
  value={73}
  tone="ok"
  target={85}
  sub="of €1.2M annual quota"
  startLabel="0"
  endLabel="150%"
/>
Gauge

Progress

Task or batch progress indicators. ProgressBar is a horizontal track for sequential operations; ProgressCircle is a ring gauge for compact percent readouts. Both accept a tone prop of type ProgressTone ("primary" | "ok" | "warn" | "err"). ProgressBar also supports an indeterminate mode with a sliding shimmer for operations of unknown duration.

ProgressBar

ProgressBar props props
PropTypeDefaultDescription
valuenumber00-100. Ignored when indeterminate.
toneProgressTone"primary""primary" | "ok" | "warn" | "err".
indeterminateboolean—Sliding shimmer for unknown durations.
labelReactNode—Right-aligned mono label above the track.
labelLeftReactNode—Left-aligned label above the track.
ProgressBar

ProgressCircle

ProgressCircle props props
PropTypeDefaultDescription
valuenumber—0-100.
sizenumber44Diameter in px.
strokeWidthnumber4Ring thickness.
toneProgressTone"primary""primary" | "ok" | "warn" | "err".
childrenReactNode—Center content. Defaults to the rounded percentage.
ProgressCircle

Trends & status

Small indicators that convey direction, health, or activity at a glance.

TrendBadge

TrendBadge props props
PropTypeDefaultDescription
deltanumber—Signed percentage change.
positiveIsGoodbooleantrueWhether an increase is good (revenue) or bad (error rate).
format(d: number) => string—Formats the delta. Default: signed percentage.
labelstring—Dim comparison label after the number.
TrendBadge

UptimeStrip

UptimeStrip props props
PropTypeDefaultDescription
segmentsUptimeTone[]—Oldest-first array of per-bucket tones ("ok" | "warn" | "err" | "idle").
heightnumber22Strip height in px.
startLabelReactNode—Left label (e.g. '90d ago').
endLabelReactNode—Right label (e.g. 'today').
renderTooltip(index: number) => ReactNode—Hover tooltip renderer.
UptimeStrip

StatusDot

A small colored circle driven by StatusTone ("ok" | "warn" | "err" | "idle" | "prov" | "dim").

StatusDot

StatusText

StatusText props props
PropTypeDefaultDescription
toneStatusTone—"ok" | "warn" | "err" | "idle" | "prov" | "dim".
childrenReactNode—Status label text.
StatusText

Tags & badges

Small metadata pills and numeric counts. Tag labels entities. FilterChip is a toggleable filter pill that renders as a button. CountBadge is a mono numeric badge for nav or tab items.

Tag

productionus-east-1tier:enterprisev2.4.1
Tag

FilterChip

FilterChip props props
PropTypeDefaultDescription
setboolean—Filled state once a value is chosen.
onRemove() => void—Renders a remove button. Click does not bubble.
expandablebooleantrue when no onRemoveShows a chevron down icon.
FilterChip

CountBadge

CountBadge props props
PropTypeDefaultDescription
tone"default" | "warn""default"Tone override.
1230
CountBadge

Avatars

User identity indicators. Avatar shows an image or fallback initials. AvatarGroup is an overlapping stack with an overflow count chip.

Avatar

Avatar props props
PropTypeDefaultDescription
srcstring—Image URL.
altstring""Image alt text.
initialsstring—Fallback text shown when src is absent.
size"sm" | "md" | "lg""md"Avatar size.
colorstring—Background color override.
JD
MB
AK
SY
?
Avatar

AvatarGroup

AvatarGroup props props
PropTypeDefaultDescription
peopleAvatarGroupPerson[]—People to display. Each has src, initials, color, and name.
maxnumber4Avatars shown before collapsing into +N.
size"sm" | "md" | "lg""sm"Avatar size.
AvatarGroup