Stat & progress
A headline number with its trend, and a bar for how far along something is.
When to use it
Tell Stat whether up is good. Overdue invoices going up is bad news, and colouring it green would lie.
Figures and progress
Won this month₹41.2L12.0%8 projects
Overdue follow-ups104.0%
Capacity installed264kW3.0%
Installation8 of 12 steps
Subsidy claim30%
Payment received100%
Documents rejected15%
KPI tiles with icons
A tile beside the label says what is being counted. A different tone per tile where they measure different things; the value, not the tile, carries good or bad.
Stock value at cost₹67,95,000Both warehouses
At or below reorder level7items to reorder
Out of stock2items with none on hand
Units committed186Held for 5 open invoices
Options
Everything you can pass to Stat & progress.
| Prop | Type | Default | What it does |
|---|---|---|---|
| label / value | string / ReactNode | — | The value arrives formatted: currency and locale are the caller’s. |
| delta / goodWhen | number / 'up' | 'down' | — / 'up' | Change as a fraction (0.12 is +12%), and which direction is good news. |
| prefix / suffix / hint | ReactNode / ReactNode / string | — | Units around the figure, and a line under it. |
| icon / tone | IconName / Tone | — / 'module' | A 28px IconTile beside the label. |
| loading | boolean | false | A bar in place of the figure. |