Statistic
Displays statistical values with Intl.NumberFormat thousands separators and precision (locale-aware), supporting prefix/suffix and a skeleton loading placeholder.
Basic Usage
Basic value
Thousands Separator and Precision
Thousands separator + precision
Prefix / Suffix
prefix / suffix
Disabling Thousands Separator
group-separator=false
Loading State
loading (reuses skeleton)
Title and Extra
The title attribute (or slot="title") renders a heading above the value; extra (attribute or slot="extra") renders supplementary content below the value row (e.g. a trend footnote). title is a native global attribute — the component absorbs it after rendering to avoid the browser's native hover tooltip.
title + extra (dashboard card)
Trend Indicator
trend="up" | "down" renders a rise/drop arrow before the value, colored by semantic tokens (up --oas-color-success-text / down --oas-color-danger-text, dark variants included). Override with --oas-statistic-trend-up-color / --oas-statistic-trend-down-color.
trend up / down
Value Animation (compose number-animation)
The component does not build in value animation — compose oas-number-animation via slot="value" for a rolling entrance:
slot=value + oas-number-animation
Font Size
Font size is fixed at --oas-font-size-lg (16px) by default and does not follow the outer context; override with the CSS variable --oas-statistic-font (e.g. 32px).
Complex Prefix / Suffix (slot distribution)
slot=prefix / slot=suffix
Use the prefix-text / suffix-text attributes for simple text; for complex content (icons/tags/badges etc.) distribute via the same-named slot="prefix" / slot="suffix" slots — distributed content natively replaces the attribute text. prefix / suffix are compatibility aliases (canonical: prefix-text / suffix-text), usable through both the attribute and property channels (React / Vue bindings included).
API
oas-statistic
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
extra | Supplementary content below the value row (trend footnote etc.) | string | — |
group-separator | Thousands grouping ("false" disables) | string | true |
loading | Loading state (skeleton placeholder) | boolean | — |
precision | Decimal places (rounded) | string | 0 |
prefix-text | Prefix / suffix text | — | — |
suffix-text | Prefix / suffix text | — | — |
title | Heading above the value (native global attribute, absorbed after rendering) | string | — |
trend | Trend indicator: up (rise, success semantic color) / down (drop, danger semantic color) with arrow | string | — |
value | Numeric value (number string) | string | 0 |
Slots
| Name | Description |
|---|---|
extra | Supplementary content below the value row (distributed content takes precedence over the extra attribute text) |
prefix | Leading content (icons/tags etc.; distributed content takes precedence over the prefix attribute text). For simple text use the prefix attribute |
suffix | Trailing content (icons/tags etc.; distributed content takes precedence over the suffix attribute text). For simple text use the suffix attribute |
title | Heading above the value (distributed content takes precedence over the title attribute text) |
value | Custom value rendering (e.g. compose oas-number-animation for an animated value); when distributed, the Intl-formatted text is not rendered |
CSS Variables
| CSS Variable | Default |
|---|---|
--oas-statistic-font | var(--oas-font-size-lg) |
--oas-statistic-trend-down-color | var(--oas-color-danger-text) |
--oas-statistic-trend-up-color | var(--oas-color-success-text) |
No events (purely presentational).