Progress
atomHorizontal progress bar for completion, usage, or health metrics. Supports four semantic variants (accent, success, warning, danger), three sizes, optional labels, and threshold-based auto-variant switching via warnAt/dangerAt props. Smooth CSS transitions on value and variant changes.
Basic progress
Simple bar with a value and label.
Variants
Semantic color variants for different contexts.
Threshold auto-variant
Automatic color switching based on value thresholds (ascending: high is bad).
Usage
Installation
API Reference
Progress props — * required
| Prop | Type | Default | Description |
|---|---|---|---|
value* | number | — | Current progress value. |
max | number | 100 | Maximum value. |
variant | "accent" | "success" | "warning" | "danger" | "accent" | Bar color variant. |
size | "sm" | "md" | "lg" | "md" | Bar height. |
label | boolean | ReactNode | — | Show percentage label (true) or custom content. |
warnAt | number | — | Value threshold to auto-switch to warning variant. |
dangerAt | number | — | Value threshold to auto-switch to danger variant. |