Metrics

The numbers by which a screen is read at a glance. Two densities of one component: a strip below the header and a compact cluster inside it.

When to use it

A strip below a list header — the strip variant. Four to six numbers that describe the whole screen, not one selected row.
A compact cluster next to the actions in a header — the inline variant. Two or three numbers not worth a whole strip.
A number that needs a sentence beside it. In the strip variant note carries it — “overdue: 2”, and right below it which two.

A chart or a trend. A cell shows one number now, not its development — development does not fit into twenty-two pixels of height.
The state of a single item. “Awaiting confirmation” on one specific order is a badge, that is IngotBadge; metrics talk about a set.
Highlighting the most important number with colour. The tone is information, not emphasis: danger means that number is a problem, not that it matters most. Half a strip in colour says nothing.

items: readonly IngotMetric[] — The cells in the order they are read. Four to six for strip, two or three for inline.
variant: "strip" | "inline" — A density, not a separate component: two components would drift apart the moment someone tuned one of them. The default is strip — the band below the header.
label: string — A translated aria-label for the group. It says what the numbers are about.
testId: string — An anchor for tests. It affects neither appearance nor behaviour.