finance

BudgetMeter

Example

Groceries$320 / $500

$180 left

Dining Out$445 / $500

$55 left

Entertainment$620 / $400

$220 over budget

Import

import { BudgetMeter } from '@connor-adams/designsystem'

A budget-vs-spend row for the budgets screen and category drill-downs. The bar self-colors: green under budget, amber near the limit, oxblood over.

<BudgetMeter label="Groceries" spent={842} limit={900} />
<BudgetMeter label="Dining" spent={586} limit={500} />   {/* over → oxblood */}

warnAt sets the amber threshold (default 0.85). Currency/locale via Intl.

Prop	Type	Default
label*	ReactNode	—
spent	number	0
limit	number	0
currency	string \| undefined	CAD
locale	string \| undefined	en-CA
warnAt	number \| undefined	0.85