Spending Limit Card
Monthly cap widget showing current spend on a Progress bar with alert threshold markers and an explicit policy for what pauses at the limit.
Monthly cap widget showing current spend on a Progress bar with alert threshold markers and an explicit policy for what pauses at the limit.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Spending Limit Card is the cost-control widget for the Acme workspace, showing $840 spent of a $1,500 monthly cap (56%) via a Progress bar with two tick markers: an 80% alert at $1,200 with a Sent badge indicating the alert already fired, and a 95% alert at $1,425 still pending. The policy section names exactly what happens at the cap: overage features (API calls beyond the plan, extra storage) pause, and avery@acme.com is emailed before and at the limit. Core access and data are never affected.
The cap and spent values are standalone consts; thresholds are a typed const array with an active flag that drives the Sent badge. The explicit cap policy is what prevents the support ticket asking whether the account gets suspended.
Reach for this block on the billing overview or settings page, wired to your spend aggregation endpoint. Update the spent value on each charge event and refresh the threshold active flags when an alert email fires.
A natural flow around it on an Application Pro page:
Before
After
One strong use is a monthly usage cap with email alerts. Other spending limit contexts:
Tip: name the things that pause at the cap; a vague limit card raises more support tickets than no card at all.