Metric Row

A breakdown list: MetricRowList frames a set of MetricRows divided by hairline separators. Each row is a left-hand label (with an optional sub-label) and a right-hand mono value that aligns for scannable digits. Use it for segment splits, line items, and any label/value breakdown.

Examples

A segment breakdown in chatLoading state

Break revenue down by region.

Revenue splits across four regions, led by North America:

North America

Largest segment

$2.61B

EMEA

Fastest growing

$1.18B

APAC

$540M

Rest of world

$180M

MetricRow

Prop	Type	Description
`label`	`ReactNode`	Left-hand descriptor of the line item.
`value`	`ReactNode`	Right-hand figure. Put a `<Cite>` inside it when sourced.
`sub`	`ReactNode`	Optional muted sub-label under the descriptor.

MetricRowList

Wraps MetricRow children in an outlined card and inserts a Separator between them. Pass the rows as children in the order they should appear.

tsx

<MetricRowList>
  <MetricRow label="North America" sub="Largest segment" value="$2.61B" />
  <MetricRow label="EMEA" sub="Fastest growing" value="$1.18B" />
  <MetricRow label="APAC" value="$540M" />
</MetricRowList>

Agent context

Use MetricRowList with MetricRow children for a breakdown (segments, line items). Each row is a left label plus a right mono value; values right-align for scannable digits. Put a <Cite> inside a value when it's sourced.

PreviousStat Tile

NextComparison Table