Quota Progress

Overview

QuotaProgress shows a labeled progress bar tracking resource consumption (e.g., API requests, storage, seats) against a defined limit. When usage reaches 80% or above, the bar turns yellow and a warning message appears. The bar caps at 100% visually even if the quota is exceeded.

Usage

import { QuotaProgress } from "@leanicon/web-builder-library/saas";

<QuotaProgress
  quota={{
    resource: "API Requests",
    used: 42500,
    limit: 100000,
    unit: "requests",
  }}
/>;

Variants

Default

Dark

Near Limit

At Capacity