Progress API
View componentThe full prop reference for the Progress component. Displays an indicator showing the completion progress of a task.
Import
import { Progress } from '@structyl/styled';Props
Progress
Root progress bar component with styled variants; wraps Progress.Root from primitives and renders the indicator inside
| Prop | Type | Default |
|---|---|---|
| value# | number | nullCurrent progress value (0 to max). Pass `null` or `undefined` for indeterminate state. Defaults to null. | — |
| max# | numberMaximum value for the progress bar. Defaults to 100. | — |
| getValueLabel# | (value: number, max: number) => stringCustom function to return localized label announced by screen readers. Defaults to percentage format. | — |
| size# | 'xs' | 'sm' | 'md' | 'lg' | 'xl'Track height variant; xs=h-1, sm=h-1.5, md=h-2, lg=h-3, xl=h-4 | 'md' |
| color# | 'primary' | 'success' | 'warning' | 'destructive' | 'error' | 'info' | 'secondary'Color of the progress indicator fill | 'primary' |
| striped# | booleanAdd diagonal stripe pattern to the indicator | false |
| animated# | booleanAnimate the stripes moving left to right; works with or without striped=true | false |
| indeterminate# | booleanOverride value with indeterminate animated state (1/3 width pulsing) | false |
| showLabel# | booleanDisplay percentage text centered inside the bar (useful for larger sizes) | false |
| indicatorClassName# | stringAdditional CSS classes to apply to the inner indicator element | — |
| className# | stringAdditional CSS classes to apply to the track container | — |
| asChild# | booleanRender as a child of another component (from Primitive) | — |
Source code
If you didn't find what you need here, read the component implementation .