MetricItem

A compact value with a label, explanation and optional semantic icon.

MetricItem

View source · API reference

A value with context

Make the unit and time period part of the content.

Example build time

1.8 s

Local preview, illustrative measurement

<MetricItem
  label="Example build time"
  value="1.8 s"
  detail="Local preview, illustrative measurement"
  icon="lucide:check"
  tone="success"
/>

Supporting content

Use the default slot for a qualifier or destination after the metric.

Documentation

Ready

Review the components before release

Browse component guides 
<MetricItem
  label="Documentation"
  value="Ready"
  detail="Review the components before release"
>
  <BtnLink href="/components/" variant="link">Browse component guides</BtnLink>
</MetricItem>

Behavior and accessibility

The value is text, so units and formatted numbers remain under your control. Tone affects the optional icon frame; it does not imply a trend or change the value’s meaning.

API reference

MetricItem 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.

label

RefOrValue<string>
Default
not set

Visible label. Use language that describes the control or value in its surrounding context.

value

RefOrValue<string>
Default
not set

Displayed value as text, including any unit or formatting.

detail

RefOrValue<string>
Default
not set

Supporting explanation below the value.

icon

RefOrValue<string>
Default
not set

Registered SVG icon name. In browser apps, include the icon in the resolver passed to defineIconComponents.

tone

RefOrValue<SemanticTone>
Default
inherited

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

Composition

Default slot: content after the detail. Register defineMetricItemComponent with Flex and Icon dependencies.