Iryx UIData display
IStat
A single headline number with its movement, built for a row of tiles across the top of a dashboard.
Trend
The sign of delta decides the direction, and zero is neutral.
Override it with trend when a rising number is bad news — days to payment, error rate, churn.
trend colours the delta and nothing else. The arrow keeps following the sign of the number, because an arrow that disagrees with the figure printed beside it — "↑ -14%" — reads as a bug rather than as nuance. Down and green means the number fell and that was the good outcome.
Formatting the delta
formatDelta receives the raw number, for when a percentage is the wrong unit.
Sizes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | What the number measures |
value | string | number | — | The headline figure |
delta | number | — | Change since the comparison period |
trend | 'up' | 'down' | 'neutral' | from delta | Colours the delta; the arrow still follows the sign |
hint | string | — | Names the comparison, e.g. "vs. last quarter" |
size | 'sm' | 'md' | 'lg' | 'md' | Overall scale |
formatDelta | (delta: number) => string | percentage | Formats the delta text |
as | string | 'div' | Element to render |
unstyled | boolean | — | Drop built-in classes |
class | string | — | Merged with the built-in classes |
ui | { root?, label?, value?, delta?, hint?, row? } | — | Per-element class overrides |
Colour is carried by the delta text rather than a filled surface, and the arrow beside it is decorative — the sign already says which way it went.
Slots
| Slot | When to use it |
|---|---|
label / hint | Either needs markup |
delta | Full control of the change line, receiving { trend } |
Pair one with ISparkline when the shape of the change matters as much as its size.