Quota Bar

Threshold ramp — healthy · warning · full

The bar's color ramps with usage to match the caption tone so the visual escalation reads gradually rather than jumping straight from primary to red. Below 90% the bar uses the brand primary variant; between 90–99% it switches to warning; at ≥ 100% it switches to error and the caption is replaced with the full-state copy + optional CTA.

Ring shape — circular quota

Pass shape="ring" for a circular Progress with the caption stacked beside it and the pct% inside the ring. Use rings for tile-based dashboards or where vertical space is tighter than horizontal. The same threshold ramp applies — bar and ring share variants.

Custom labels & non-routing CTA

Pass remainingLabel(n) and fullLabel for full i18n control over the caption copy. Use ctaOnClick instead of ctaHref when the CTA should open a Drawer/Dialog rather than navigate — the CTA renders as a real button.