Avala Design
← Components/primitives

ProgressBar

Carbon-spec linear progress indicator. Determinate (with explicit value) or indeterminate (animated stripe). Supports an inline label + helper text + status (active/finished/error).

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { ProgressBar, ProgressBarStatus } from "@avala/design";

<ProgressBar size="md" status="active">
  <ProgressBarStatus />
</ProgressBar>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-progressbar--defaultOpen in Storybook →

When to use

  • Long-running operation with a known percentage (file upload, batch export, training run).
  • Indeterminate variant for ops where percentage isn't available but visual reassurance is.

When not to use

  • Spinner-style indeterminate without bar shape → use `Loading` or `InlineLoading`.
  • Layout-shape placeholders → use `Skeleton`.
  • Multi-step sequential flows → use the ProgressIndicator pattern (steppers).