Progress

Determinate progress bars for batch settlements, imports, and collection goals.

Basic

Settlement batch62%

<Progress value={62} />

Colors

<Progress value={72} color="primary" />
<Progress value={58} color="accent" />
<Progress value={94} color="success" />
<Progress value={41} color="warning" />
<Progress value={18} color="danger" />
<Progress value={66} color="info" />

Sizes

<Progress value={45} size="sm" />
<Progress value={45} size="md" />
<Progress value={45} size="lg" />

With context

Dues collected — June$84,120 of $97,500

312 of 354 active memberships drafted

<div className="space-y-2">
  <div className="flex items-baseline justify-between">
    <span className="text-sm font-medium text-ink">Dues collected — June</span>
    <span className="text-sm text-ink-muted">$84,120 of $97,500</span>
  </div>
  <Progress value={86} color="success" size="lg" />
  <p className="text-xs text-ink-faint">312 of 354 active memberships drafted</p>
</div>