Progress

Progress is a linear bar built on Ark UI's Progress state machine, so it ships role="progressbar", the aria-value* wiring, and indeterminate support for free. The fill axis (filled / gradient) and the palette mirror Badge, so a bar and a chip share the same accent language.

import { Progress } from '@42/ui-react/progress';

<Progress value={60} />
<Progress variant="gradient" value={70} />
<Progress value={null} /> {/* indeterminate */}

Playground

<Component size="md" value={60} />

Full prop browser

Variants

Two fill treatments. filled (the default) routes through the palette; gradient paints its own stops.

<Progress variant="filled" value={60} /><Progress variant="gradient" value={60} />

Colors

Any palette color pairs with the filled variant via the kit's data-color system. Use it for status semantics: green for healthy, orange for warning, red for critical.

<Progress color="green" value={70} /><Progress color="orange" value={45} /><Progress color="red" value={20} />

Gradient

variant="gradient" defaults to a purple→pink sweep. Pass a gradient config (from / to / via / dir) to customize the stops and direction — same API as Badge.

The gradient spans the full track, not just the filled portion — the bar reveals a left slice of it, so the complete from→to only appears at 100%.

<Progress variant="gradient" value={70} /><Progress variant="gradient" value={70} gradient={{ from: 'var(--color-cyan-400)', to: 'var(--color-blue-600)' }} />

Sizes

Five track heights, matching the kit's xs–xl scale (Slider uses the same).

<Progress size="xs" value={60} /><Progress size="sm" value={60} /><Progress size="md" value={60} /><Progress size="lg" value={60} /><Progress size="xl" value={60} />

Indeterminate

When you can't measure progress, pass value={null} (or omit both value and defaultValue and call it indeterminate). The bar runs an animated sweep — and under the OS "reduce motion" setting it rests as a static partial bar instead of looping.

<Progress value={null} />

API

All other props are forwarded to the underlying Ark Progress.Root.

Accessibility

Ark stamps role="progressbar" plus aria-valuenow / aria-valuemin / aria-valuemax on the bar. In the indeterminate state aria-valuenow is dropped, so assistive tech announces an unmeasured "busy" bar. Provide an aria-label (or wire aria-labelledby to a visible caption) so the bar names what it's tracking:

<Progress value={uploaded} aria-label="Upload progress" />