# Statistic
> Generated from statistic.contract.json — do not edit by hand.

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.

Surfaces: dashboard, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `label` | string | `—` | The caption above the value |
| `value` | string | number | `—` | The headline figure |
| `precision` | number | `—` | Format value to N decimal places with en-US thousands separators (non-numeric values left verbatim) |
| `prefix` | string | `—` | Small text before the value (e.g. a currency mark) |
| `suffix` | string | `—` | Small text after the value (e.g. %, unit) |
| `prefix-icon` | icon name | `—` | A DS icon before the value (e.g. system-currency-circle-dollar) |
| `suffix-icon` | icon name | `—` | A DS icon after the value |
| `trend` | up | down | `—` | Tint the value success-green/error-red + a matching trend arrow glyph |
| `loading` | boolean | `false` | Show a shimmer skeleton in place of the figure |

## Visual standard (measured)
- Caption: 14/22 #4A4A4A
- Value: 24/32 SemiBold #1A1A1A
- Prefix / suffix: 14/22 Regular #8A8A8A, text or a 16px DS icon
- Precision: value formatted to N decimals, en-US thousands separators
- Trend: up color-success #16C49A + trend-up glyph · down color-error #F5222D + trend-down glyph
- Loading: shimmer skeleton (label + value bars), motion-token animation, role=status

## When to use
- **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

Caption names the metric in sentence case — 'Active players', not 'ACTIVE PLAYERS'. Use trend only when up/down carries meaning; the element pairs the tint with a trend arrow glyph so colour is never the sole signal. Reach for prefix-icon/suffix-icon (a currency mark, a %) over a decorative image; set precision for money/rates so the figure reads consistently.