Data
BigNumber
One number, at the size of a headline.
When to reach for it
Examples
default
with sparkline
Notes
One number, at the size of a headline.
The form most dashboards need most often and most chart libraries do not ship, on the grounds that it is not a chart. It is the right answer whenever there is exactly one figure to report: a plot of a single value is a plot whose shape carries nothing, and the reader has to decode an axis to recover a number that could simply have been printed.
The delta is where this earns its place over a <p>. Direction is stated by the CALL SITE (intent), never inferred: "errors down 12%" is good news and "revenue down 12%" is not, and no component can tell which it is holding. Where the direction is known, the arrow and the word carry it — the status colour is the third signal, never the only one.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | ReactNode | What the number counts. | |
| valuerequired | ReactNode | The number, already formatted — this component does not guess a unit. | |
| children | ReactNode | A sparkline, a note, a caveat. Sits under the number. | |
| className | string | — | |
| delta | BigNumberDelta | — |
Types
export type DeltaIntent = 'up-is-good' | 'down-is-good' | 'neutral'Accessibility
- The delta’s direction is stated by the call site through intent, never inferred from the sign: “errors down 12%” is good news and “revenue down 12%” is not, and no component can tell which it is holding.
- The arrow and the words carry the direction; the status tint is the third signal, never the only one — so the reading survives greyscale, forced colours and colour blindness.
- value is taken already formatted. The component does not guess a unit, a currency or a locale.