Progress

Use cases

• File uploads — show upload percentage with showValue.
• Multi-step processes — indicate progress through a wizard or onboarding flow.
• Loading states — omit value for an indeterminate shimmer animation.
• Quotas and limits — display usage against a maximum (storage, API calls).

When NOT to use

• Loading entire pages — use Skeleton placeholders.
• Step-by-step navigation with clickable steps — use a Stepper (planned).
• Binary loading/not-loading on a button — use the button's isLoading prop.

Sizes

Composition

• Pass label for screen reader context. Pass showValue to render the percentage visually.
• Use valueLabelPosition to place the visible value inline-end, above the bar, or below the bar.
• Use showTrackLabels with trackLabelPosition to place min/max labels above, below, or inline with the bar.
• Use labelGap and labelGroupGap to control compact spacing when value labels share a row with min/max labels.
• Omit value entirely for indeterminate mode — the bar animates a shimmer.
• Pair with a <Text> above the bar for a visible label + percentage layout.

Stepwise color

Progress uses the fixed primary brand tone by default. Use segmented only when progress communicates health, risk, or completion bands. The fill transitions width and tone together so range changes fade smoothly:

<Progress
  value={68}
  segmented
  showValue
  showTrackLabels
  valueLabelPosition="bottom-center"
  trackLabelPosition="bottom"
  labelGap="xs"
  valueFormatter={(value) => `${value} selected`}
  label="Payroll import health"
/>

The default segments are semantic and tokenized: low values use danger, middle values use warning and primary, and completed values use success. Pass segments to tune the thresholds for a domain-specific scorecard.

Related

• Skeleton — placeholder for loading content.
• Slider — interactive range input (not a progress indicator).