Budget Progress Row
Actual versus target progress per category.
Default
Groceries$300 / $800
Over target
progress > 1 still renders a full bar.
Dining$440 / $400
Inset
Inset (budget card)$300 / $800
Developer
import { BudgetProgressRow } from "@financial-tracking/design-system"API reference
| Prop | Type | Default |
|---|---|---|
labelRequired. Category or row title. | ReactNode | — |
progressRequired. 0–1 portion of target; values above 1 fill the bar. | number | — |
fractionRequired. Right label, e.g. "$300 / $800". | ReactNode | — |
insetPadding + sans fraction for inset cards. | boolean | false |