Budget guardPro
A spend cap with a projected run out date and pause behavior.
On this page
ProRunning hot: the budget runs out before the month ends.
Installation
Usage
import { BudgetGuard } from "@/components/ui/chatcn/pro/budget-guard"
<BudgetGuard spent={1940} cap={2800} day={19} daysInPeriod={31} periodStart={start} pauseAtCap={pause} onPauseAtCapChange={setPause} />The pace comes from spend per day so far. The marker on the bar is where spend would be at an even pace; past it, the bar turns amber and the run out date is spelled out.
Examples
States
ProOn pace, paused at the cap, and over while still running.
Props
| Prop | Type | Notes |
|---|---|---|
spent, cap | number | This period |
day, daysInPeriod, periodStart | For the pace and date | |
pauseAtCap, onPauseAtCapChange | boolean | What happens at the cap |
onEditCap | () => void | Shows Change cap |
Accessibility
- The bar is a meter with a value text; the forecast is a polite live region with an icon and words.