Data Display
Stat
A tile for a metric: its label, value, and change. An arrow and a status color show the change.
ReactVueWeb Components
View in Storybook Playground
Examples
<Stat label="売上" value="¥1.2M" delta="+12%" trend="up" help="前月比" />Props
| Name | Type | Default | Description |
|---|---|---|---|
label required | ReactNode | — | Metric label. |
value required | ReactNode | — | The primary value. |
delta | ReactNode | — | Change indicator text (e.g. "+12%"). |
trend | StatTrend | neutral | Direction of the delta. @default 'neutral' |
help | ReactNode | — | Supporting note under the value. |
trendLabels | { up: string; down: string } | — | SR words for the trend. @default { up: 'increase', down: 'decrease' } |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.