Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Usage
import {Progress} from "@/components/ui/progress";
<Progress value={62} />;Components
Progress
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | undefined | Current progress value from 0–100. Use null to render an indeterminate progress. |
max | number | undefined | The maximum value representing 100%. If omitted, a11y exposes only min and now. |
getValueLabel | (value: number | null, max?: number) => string | undefined | Function that returns accessible text for the progress value, e.g. 33 of 99 files. |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Visual height of the track. |
color | 'primary' | 'success' | 'warning' | 'destructive' | 'primary' | Semantic color for the fill, derived from theme (light/dark) to hex colors. |
baseClassName | string | undefined | Tailwind classes to apply to the track. Takes priority over className. |
Also extends all React Native View props on the root container.
Accessibility
- The root element sets
accessibilityRole="progressbar"and mapsmin,now, andmax(if provided) toaccessibilityValue. - When
valueisnull, the component exposesaccessibilityState={{busy: true}}to indicate indeterminate progress. - On web, corresponding ARIA attributes are applied:
role,aria-valuemin,aria-valuemax,aria-valuenow, andaria-valuetextwhen available.
Styling
Progress uses Tailwind Variants for the track with the following base styles and size variants:
track: "relative overflow-hidden rounded-xl bg-secondary"
sizes: sm → h-1.5, md → h-2, lg → h-3, xl → h-4The fill is an animated Reanimated.View whose width is driven by the value. Its color is sourced from the current theme (ThemeContext) using semantic keys: primary, success, warning, and destructive.