Progress
Show exact determinate progress without relying on color.
Preview
Profile completion
72/100
Example
<.progress label="Upload" value={72} max={100} color={:primary} />API contract
progress/1 uses declared Phoenix attributes and slots. This table is generated from the compiled component metadata.
| Attribute | Type | Required | Default | Accepted values |
|---|---|---|---|---|
value |
:integer |
Yes | — |
Any value matching the declared type |
max |
:integer |
No | 100 |
Any value matching the declared type |
label |
:string |
Yes | — |
Any value matching the declared type |
color |
:atom |
No | nil |
[nil, :neutral, :primary, :secondary, :accent, :info, :success, :warning, :error] |
class |
:any |
No | nil |
Any value matching the declared type |
States and behavior
Semantic text accompanies visual treatment so status is not conveyed through color or motion alone.
Keyboard and accessibility
The component itself does not add a keyboard interaction. Any slotted action must remain a labelled native control.