Hero Metric

Usage

import {
  HeroMetric,
  HeroMetricLabel,
  HeroMetricValue,
  HeroMetricValueUnit,
} from '@epilot/spark-ui/hero-metric'

<HeroMetric>
  <HeroMetricLabel>Feed-in right now</HeroMetricLabel>
  <HeroMetricValue tone="success">
    1,240 <HeroMetricValueUnit>W</HeroMetricValueUnit>
  </HeroMetricValue>
</HeroMetric>

HeroMetric is a layout primitive: a centered, bordered card. The label, value, and unit slots are simple wrappers that apply the right typography and (for the value) tone color.

Examples

All tones

The tone prop on HeroMetricValue colors the number to convey state.

API Reference

HeroMetricValue

HeroMetricValueUnit

A smaller, semibold unit suffix to render inline with the value (e.g. W, kW).

Accessibility

• HeroMetric is a non-interactive layout shell — plain div/span wrappers with no role or keyboard behavior.
• Don't put meaning in tone alone. Pair the colored value with wording in the label (or elsewhere) that states the condition.
• Keep the label text present so the metric has a visible name; don't rely on color or position alone.