FEEDBACK

Progress

Determinate progress bar built on Radix Progress. Memphis-bordered track with a secondary token fill that animates to value.

Import

import { Progress } from 'damo-ui'

<Progress value={66} />

Override the fill bar with indicatorClassName — useful for success / warning / danger flows.

<Progress value={50} indicatorClassName="bg-success" />

Pass value={null} when total length is unknown — Radix sets aria-busy=true. Reach for Spinner for compact indeterminate feedback.

<Progress value={null} aria-label="Loading" />

Progress props

Prop	Type	Default	Description
value	number \| null	—	Current progress 0..100. Pass `null` for an indeterminate state (Radix marks it `aria-busy`).
max	number	100	Maximum value forwarded to Radix Progress.
indicatorClassName	string	—	Tailwind classes applied to the inner indicator (the filling bar).
className	string	—	Tailwind classes merged on top of the track.
aria-label	string	—	Required when no surrounding visible label is present.

Radix sets role="progressbar" with aria-valuemin, aria-valuemax, and aria-valuenow.
Always supply aria-label or aria-labelledby describing what the bar represents (Uploading file, Profile completion…).