KPI tile

One number with a label, a context sentence and an optional sparkline.

<mm-kpi-row label="Last 24 hours">
  <mm-kpi-tile label="Queries in last 24h" value="12480" delta="1204" context="on yesterday" spark="[212,168,141,126,133]"></mm-kpi-tile>
  <mm-kpi-tile label="Active agents" value="14" context="across 6 domains"></mm-kpi-tile>
  <mm-kpi-tile label="Refused" value="37" delta="12" context="since yesterday" trend="bad"></mm-kpi-tile>
  <mm-kpi-tile label="Catalogued assets" value="24059" context="from 9 sources"></mm-kpi-tile>
</mm-kpi-row>

Guidance

KPI tiles show one number with its context, on Insights and Home: a 12px sentence-case label, the value in display-kpi (Geist 600, tabular), and one context caption line: the delta and the context together ("+1,244 on the day before · from 5 sources"), never two lines. A delta is written with its sign and coloured only when it is good or bad news (trend="good" in moss, trend="bad" in crimson); it never gets an arrow. An optional 64×16 sparkline sits beside the value.

Put tiles in an mm-kpi-row, which lays them in one panel separated by rules rather than as separate cards.

Properties

Property	Attribute	Type	Default	Description
label	label	string	''	Sentence-case label, e.g. "Queries in last 24h".
value	value	string | number	''	The number. Numbers are grouped ("12,480"), or compact with compact ("1.28M"); strings show as given ("87%").
unit	unit	string	''	Unit after the value, e.g. "ms".
compact	compact	boolean	false	Formats numeric values compactly ("1.28M").
delta	delta	number | undefined		Signed change, printed with its sign ("+214", "−12").
deltaUnit	delta-unit	string	''	Unit after the delta, e.g. "points".
context	context	string	''	The rest of the context sentence, e.g. "this week" or "from 9 sources".
trend	trend	'good' | 'bad' | 'neutral'	'neutral'	good or bad colours the delta (moss or crimson); neutral (default) leaves it uncoloured.
spark	spark	number[]	[]	Values for a 64×16 sparkline beside the number, oldest first.
loading	loading	boolean	false	Shows a skeleton in place of the value.
error	error	string	''	An error sentence shown in place of the context.

Slots

Slot	Description
context	A richer context sentence, replacing context.

CSS parts

Part	Description
label	The label.
value	The number.
context	The context sentence.
delta	The signed delta.

Examples

Every state of mm-kpi-tile in Storybook, with keyboard and screen reader tests.