Progress

Import

import { Progress } from '@tallyui/components';

Usage

Pass a value between 0 and max (defaults to 100) to show determinate progress. Omit value (or pass null) for an indeterminate state.

<Progress value={60} />

Props

Prop	Type	Default	Description
`value`	`number \| null`	—	Current progress value. `null` or `undefined` renders an indeterminate bar
`max`	`number`	`100`	Maximum value
`getValueLabel`	`(value: number, max: number) => string`	percentage string	Custom accessible label function
`asChild`	`boolean`	`false`	Renders as a `Slot`, merging props onto the child element
`className`	`string`	—	Additional NativeWind classes merged via `cn()`

Plus all React Native ViewProps.

Anatomy

The styled Progress renders this structure internally:

<Progress.Root>       {/* h-4 w-full rounded-full bg-secondary */}
  <Progress.Indicator  {/* h-full rounded-full bg-primary, translateX for value */}
</Progress.Root>

The indicator uses translateX(-${100 - value}%) to fill from left to right.

Accessibility

The root element has role="progressbar" with aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext set automatically. Override the label format with getValueLabel.

Examples

Basic progress

<Progress value={45} />

Controlled with state

const [progress, setProgress] = useState(0);

useEffect(() => {
  const timer = setInterval(() => {
    setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
  }, 500);
  return () => clearInterval(timer);
}, []);

<Progress value={progress} />

Custom max

<Progress value={3} max={5} />

Custom value label

<Progress
  value={3}
  max={5}
  getValueLabel={(value, max) => `${value} of ${max} steps`}
/>

Indeterminate

<Progress value={null} />

Zero state

<Progress value={0} />

On this page