## Statistic
A single headline number with a caption, prefix/suffix (text or icon), precision, trend colour and a loading skeleton.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-statistic> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: dashboard, audience.
Props:
- label: string, default —. The caption above the value
- value: string | number, default —. The headline figure
- precision: number, default —. Format value to N decimal places with en-US thousands separators (non-numeric values left verbatim)
- prefix: string, default —. Small text before the value (e.g. a currency mark)
- suffix: string, default —. Small text after the value (e.g. %, unit)
- prefix-icon: icon name, default —. A DS icon before the value (e.g. system-currency-circle-dollar)
- suffix-icon: icon name, default —. A DS icon after the value
- trend: up | down, default —. Tint the value success-green/error-red + a matching trend arrow glyph
- loading: boolean, default false. Show a shimmer skeleton in place of the figure
Tokens: text-default, text-secondary, text-tertiary, color-success, color-error, bg-container-secondary, split, radius-xs, font-product.
Use when: Statistic (a single KPI on a dashboard or results screen); Badge (a small count attached to another element); Progress (a value's share of a whole).