Components / Progress

Shared progress bars for cards and project workstreams.

`ProgressStatus` is the shared truth for completion UI across app surfaces. It replaces circular progress treatments with a horizontal bar, percentage-aware color, and a right-aligned percent total.

Standard states

25%
Discovery tasks underway
46%
Outputs are taking shape
74%
Launch readiness is close
0%
No work marked complete yet

Compact card usage

46%

Use the compact size when the surrounding card or toolbar already provides enough context and only the bar plus right-aligned percent needs to be visible.

Usage guidance

Use for measurable completion

Prefer `ProgressStatus` when the UI can express clear completion from 0-100%, such as project progress, key tasks, expected outputs, or checklist-driven workflows.

Keep the percentage visible

The percentage total belongs on the right edge of the component. Avoid adding separate percent labels or swapping back to circular or pie-chart visuals on app surfaces.

Use supporting copy only when helpful

Optional caption text should add context like counts or phase detail, for example `3 of 5 done`, rather than repeating the percent already shown by the component.