Components
Badges & status
Two small markers with fixed meanings. A badge tells you how a number changed. A status tells you where a thing stands.
Change badges
Up is good, down is bad — the page decides which way is good (rising expense is a down badge).
+9.4%+5.4%0.0%New in 2026
Status
Pass a word and the right colour follows — the same word always gets the same colour.
ActiveDuePlanningDonePaidOverdueArchived
Props
| Prop | Values | Default | What it does |
|---|---|---|---|
Badge tone | 'up' | 'down' | 'neutral' | 'up' | Good change, bad change or no change |
Status text | string | — | Active · Due → blue · Planning → orange · Done · Paid → green · Overdue → red · others neutral |
Status tone | 'info' | 'warn' | 'ok' | 'bad' | 'neutral' | — | Force a tone when the word is not in the list |