MetricStrip

Arrange related metrics in a responsive surface with a clear reading order.

MetricStrip

View source · API reference

A workspace snapshot

These are illustrative values. Each metric includes enough context to interpret its number.

Components

12

In this example workspace

Pages

24

Published documentation

Build

Passing

Latest local check

Review

2

Changes awaiting review

<MetricStrip tone="neutral">
  <MetricItem
    label="Components"
    value="12"
    detail="In this example workspace"
    tone="accent"
  />
  <MetricItem label="Pages" value="24" detail="Published documentation" />
  <MetricItem
    label="Build"
    value="Passing"
    detail="Latest local check"
    tone="success"
  />
  <MetricItem
    label="Review"
    value="2"
    detail="Changes awaiting review"
    tone="warning"
  />
</MetricStrip>

A two-metric summary

Override both responsive widths when the content only needs two tracks.

Completed

8 of 10

Tasks in this example

Next step

Review

Check the remaining changes

<MetricStrip columns="1" columnsSm="2" columnsLg="2" variant="outline">
  <MetricItem label="Completed" value="8 of 10" detail="Tasks in this example" />
  <MetricItem label="Next step" value="Review" detail="Check the remaining changes" />
</MetricStrip>

Behavior and accessibility

Use labels and details to communicate units, periods and provenance. MetricStrip does not calculate values; your data or application owns them.

API reference

MetricStrip contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

tone

RefOrValue<SemanticTone>
Default
inherited

Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.

variant

RefOrValue<ComponentVariant>
Default
surface

Visual treatment. Accepts solid, surface, surfaceAlt, spotlight, glass, flat, flatAlt, flatSolid, outlineFill, outline, subtle, subtleBtn, link, sheen, underline, rail, bracket or none.

columns

RefOrValue<number | string>
Default
1

Column count from 1 to 12, or a CSS track list such as minmax(0, 1fr) auto. Numeric counts are clamped.

columnsSm

RefOrValue<number | string>
Default
2

Column count or CSS track list at the theme’s sm breakpoint and above.

columnsLg

RefOrValue<number | string>
Default
4

Column count or CSS track list at the theme’s lg breakpoint and above.

Composition

Default slot: MetricItem elements or other grid items. Register defineMetricStripComponent with Panel and Grid; register MetricItem separately.