Stat
Presents one tabular metric with an optional text-labeled directional trend.@gemologic/sheen-charts · dataPlayground
This example has no scalar controls. Its validated source remains interactive below.
- Error rate
- 0.18%
- 0.04 points lower
<Stat label="Error rate" value="0.18%" trend="down" trendLabel="0.04 points lower" />Variant matrix
Directional metric
- Error rate
- 0.18%
- 0.04 points lower
Anatomy
- Package
@gemologic/sheen-charts- Source
packages/charts/src/Stat.tsx- Tokens
--sheen-color-fg--sheen-color-fg-muted--sheen-color-market-up--sheen-color-market-down--sheen-color-market-flat--sheen-text-h2-size
Accessibility
Role: term and definitionKeyboard: No component-owned keysDo
- State the direction and magnitude in trendLabel.
Do not
- Do not rely on arrow shape or color to communicate a change.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label * | string | — | Required visible metric label. |
value * | string | number | — | Nonempty display text or a finite number. |
trend | StatTrend | — | Optional directional state; requires trendLabel. |
trendLabel | string | — | Required visible non-color description when trend is supplied. |
class | string | — | Optional class appended to the component root. |