imitation
Statistic
A labeled number for a summary row or a card headline.
This weekTitle, value, and optional prefix, suffix and precision
Open tasks
42
Due soon
7
Shipped
18
Hours logged
109h
On-time rate
87.5%
Budget left
£158,450
Interviews booked
—
Tasks waiting on a client reply
7
In context
Dashboard headerOne card per figure, with a delta line under each
Open tasks
42
↓ 6 this week
Due soon
7
3 today
Shipped
18
↑ 4 vs last month
Props
| Prop | Type | Required | Default |
|---|---|---|---|
title | ReactNode | No | — |
value | string | number | Yes | — |
precision | number | undefined | No | — |
prefix | ReactNode | No | — |
suffix | ReactNode | No | — |
className | string | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Accessibility
Plain text content — no special ARIA needed. A number is formatted with locale-aware thousands separators (toLocaleString) unless precision is set, in which case it's shown as a fixed-decimal string instead.
data-rebar-* attributes
data-rebar-component="statistic", data-rebar-part="title" | "value" | "prefix" | "suffix".
Migrating to Ant Design
AntD's Statistic has the same title/value/precision/prefix/suffix prop shape almost exactly — a close, mostly mechanical rename, not yet codemod-covered.