Progress
Note
A component that organizes content into vertically stacked collapsible and expandable sections.
Design checklist
| Status | Item | Description |
|---|---|---|
| ✔️ | Anatomy | Includes descriptions of all parts of the component and its major variants. |
| ✔️ | States | Includes all applicable interaction, display and value states. |
| ✔️ | Options | Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.) |
| ✔️ | Color schemes | Includes both light and dark color schemes. |
| Behaviors | Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow). |
Anatomy
- Track: The background bar representing the total progress range.
- Indicator/Bar: The filled portion of the track showing current progress.
- Label (optional): Text label describing the progress or its context.
- Value display (optional): Numeric or percentage value of progress, shown as text.
- Icon (optional): Icon indicating status (e.g., success, error, loading).
States
- Default: Standard appearance, shows current progress.
- Indeterminate: Animated indicator when progress value is unknown.
- Complete: Full bar and optional success indicator when progress reaches 100%.
- Error: Error state with warning color and optional error icon.
- Disabled: Visually muted and non-interactive.
- Active/Animated: Animated bar for ongoing progress.
Options
- value: Current progress value (number or percentage).
- max: Maximum value for the progress range.
- label: Optional label describing the progress.
- showValue: Show numeric or percentage value.
- indeterminate: Show indeterminate/animated state.
- status: Status indicator (e.g., success, error).
- size: Size of the progress bar (e.g., small, medium, large).
- theme: Theme (
default,alternative). - icon: Optional icon for status.
- className: Custom class names for styling.
- disabled: Disable the progress bar.
Behaviors
- Progress update: Bar fills according to the
valueprop. - Indeterminate animation: Shows animated bar when progress is unknown.
- Status indication: Visual feedback for success, error, or ongoing progress.
- Accessibility: Uses ARIA attributes for screen readers (e.g.,
aria-valuenow,aria-valuemax). - Label/value display: Optionally shows label and/or value for context.
- Disabled: Prevents interaction and visually mutes the component.
Changelog
| Date | Type | Description | Author | Associated issue(s) |
|---|---|---|---|---|
| YYYY-MM-DD | new | Initial design | Oanh Nguyen | PAR-52 |