Progress bar

Progress of a known task or quota.

64%

25%

Progress barLive · light and dark follow the theme switch

Usage

import { ProgressBar } from '@stanvision/atomus-react';

<ProgressBar value={64} label="Storage used" labelPosition="right" />

Shows progress of a known task or quota.

Provide

• value 0–100; label — the accessible name; labelPosition none · right · bottom (Figma: Label).

Don’t

• Don’t use it for unknown durations — use a loading indicator.

In Figma

Properties, variants and anatomy for the Figma component are on the Figma reference page. Prop names in React match the Figma property names.