ComponentsProgress
Progress
Hero example
When to use
Reach for Progress whenever a card needs a "how far along" line — a
vesting bar with a cliff tick, a filing-completion meter, a fundraise
amount-raised bar. The marker prop adds a vertical tick at any fraction
to indicate a target / cliff / boundary independent of the current value.
For multi-step progress with named milestones, prefer StepList —
Progress is for continuous fractions.
Anatomy
A thin track (height px, default 6) with a filled bar (width = value × 100%) and an optional marker line (left = marker × 100%, 2px wide). Both value and marker clamp to [0, 1].
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| valuerequired | number | — | Filled fraction, 0..1. |
| marker | number | — | Optional marker tick (e.g. cliff indicator), 0..1. |
| tone | ProgressTone | "neutral" | — |
| height | number | 6 | Height in pixels. Default 6. |
| aria-label | string | — | Accessible label. |
| className | string | — | — |
Tone palette
| Tone | Fill | Marker |
|---|---|---|
| neutral | --text-secondary | --text-primary |
| green | --action-create | --gold-warm |
| amber | --status-amber | --gold-warm |
| indigo | --action-mutate | --gold-warm |
In Dynamic Cards
This primitive's type is "Progress". The option-grant card uses it as
the vesting bar with a 25% marker for the 1-year cliff:
{ "type": "Progress", "value": 0, "marker": 0.25, "tone": "green" }