Progress

A horizontal progress track, with color token support.

Usage

progress-demo.tsx

import { Progress } from 'trivela-ui';

export function Example() {
  return <Progress value={60} aria-label="Upload progress" />;
}

value is clamped to 0..max, so a stray 250 or -40 renders as full or empty rather than overflowing the track.

Uploading0%

Uploading25%

Uploading60%

Uploading100%

The color token drives the fill; the track stays neutral.

Pass max to count in your own units — steps, bytes, seconds — instead of converting to a percentage yourself.

OnboardingStep 3 of 5

Storage8.2 GB of 10 GB

Override the track height with className — the fill is h-full, so it follows.

A bare track says nothing to a screen reader. Give it an aria-label, or point aria-labelledby at a visible Label.

Uploading assets72%

Prop	Type	Default	Description
value	number	0	Current progress. Clamped to 0..max.
max	number	100	Upper bound. A value of 0 or less falls back to 100.
color	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'	'primary'	Color scale for the fill.
className	string	—	Merged onto the track, not the fill.
...props	HTMLAttributes<HTMLDivElement>	—	Forwarded to the track. role and aria-value* are computed and cannot be overridden; children are not accepted.