Plan and Usage Settings
A plan and usage panel with a current plan row, metered usage bars with per limit notes, a near limit badge, and a policy note.
A plan and usage panel with a current plan row, metered usage bars with per limit notes, a near limit badge, and a policy note.
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
Plan and Usage Settings shows what a workspace is consuming against the limits of its current plan. The current plan row names the Growth plan with an Annual badge, the yearly price and renewal date, and a Manage plan action. Below it a ruled list of four metered rows (member seats, file storage, API requests, guest collaborators) each pairs a Progress bar with a used of limit count and an honest note on what happens at the cap: invitations blocked, uploads failed, requests returning 429, guests not counted against seats. The tightest meter carries a Near limit badge. A billing note and a refresh note close the panel.
Meters are one typed const array with a percent for the bar and a nearLimit flag for the badge. The consequence note on each row is the copy that answers the question a usage bar alone raises: what actually happens when the bar fills.
Reach for this block on the billing or workspace settings page, wired to your metering service and plan record. The consequence notes should reflect your real enforcement, so a user who reads them can trust the numbers before they upgrade.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the plan and usage overview. Other metering surfaces:
Tip: write the cap consequence next to each meter; a bar at 92 percent means nothing until the reader knows what breaks when it reaches 100.