Skip to content
Metrics

Metric tabs

The metric cards are the chart's tabs — click one and the chart below follows.

Props

PropertyTypeDefaultDescription
metricsMetricTabItem[]{ id, label, value, delta?, spark?, hint?, trailing? }. value is preformatted so the host keeps units and locale; spark takes raw numbers and is drawn as an inline polyline, no chart library.
activeIdstringSelected metric. Defaults to the first. The host owns it, so the strip composes with any chart.
onChange(id: string) => voidFired on selection.
variant"cards" | "strip" | "segmented" | "stacked""cards"cards is the bordered row. strip drops the boxes for a rule under the active metric. segmented compacts it to a pill group for a toolbar. stacked runs vertically, for a sidebar beside a tall chart.
showSparkbooleantrueDraws the inline spark where the variant has room for one.
ariaLabelstring"Metric"Names the tablist.
classNamestringOuter wrapper.