Components

Trend

A change, like +12% with an arrow, coloured by whether it is good news.

Spent$1,845+12%vs last month

Saved$640+8.4%vs last month

Bills$1,2100%vs last month

Import

import { Trend } from '@rinzai/zen';

API reference

<Trend>

A change, e.g. "+12%" with an arrow, coloured by whether it's good news: savings going up is, spending going up isn't (good="down"). value is the change as a fraction (0.12 for 12%); children follow it, muted, e.g. "vs last month".

Prop	Type	Default
`value`Required The change as a fraction: 0.12 is 12% up, -0.05 is 5% down.	`number`	`—`
`format` How the change reads, e.g. as money instead of a percent.	`((value: number) => string)`	`(v) => new Intl.NumberFormat(locale, { style: 'percent', maximumFractionDigits: 1, signDisplay: 'exceptZero' }).format( v, )`
`good` Which way is good news (default `up`); spending would be `down`.	`"down" \| "up"`	`up`
`locale` For the default percent format.	`string`	`—`