DATA DISPLAY

Stat

KPI block: mono uppercase label, big display-font value, optional delta line. Use to surface key metrics in dashboards and overview pages.

Import

import { Stat } from 'damo-ui'

Single Stat

MRR
€42,800+12% vs last month
<Stat label="MRR" value="€42,800" delta="+12% vs last month" deltaTone="positive" />

Stat group

Active users
1,284-3%
Conversion
6.4%±0%
Tickets open
122 since yesterday
1<Stat label="Active users" value="1,284" delta="-3%" deltaTone="negative" />
2<Stat label="Conversion" value="6.4%" delta="±0%" deltaTone="neutral" />
3<Stat label="Tickets open" value="12" icon={<BoltIcon size={14} />} />

Props

Stat props
PropTypeDefaultDescription
label*ReactNode—Mono uppercase label rendered above the value.
value*ReactNode—Headline number rendered in the display font.
deltaReactNode—Optional sub-line showing the change vs a baseline.
deltaTone'positive' | 'negative' | 'neutral''neutral'Color of the delta line — success / destructive / muted.
iconReactNode—Optional icon rendered beside the label.

Accessibility

  • Presentational block — label and value are independent text nodes with no implicit ARIA pairing. Wrap with role="status" + aria-live="polite" when the value updates dynamically and the user should be notified.
  • If the label is purely decorative (e.g. an abbreviation), add aria-label on the outer element with the long-form name so screen readers announce the metric clearly.
← TableMedal →