ReferenceComponentsFeedback
Progress
Progress component API, behavior, and executable example.
Loading executable example…
API and events
Communicate messages, completion, and pending work with theme tokens and reduced-motion behavior.
export function Progress({
value,
max = 100,
width = 20,
showValue = true,
slots,
slotProps,
...props
}: ProgressProps): ReactNode;Props, functions, and events
| Member | Type | Required | Description | Related types |
|---|---|---|---|---|
id | string | undefined | No | The id member uses the string | undefined contract. | — |
testId | string | undefined | No | The testId member uses the string | undefined contract. | — |
label | string | undefined | No | The label member uses the string | undefined contract. | — |
value | number | Yes | The value member uses the number contract. | — |
max | number | undefined | No | The max member uses the number | undefined contract. | — |
width | number | undefined | No | The width member uses the number | undefined contract. | — |
showValue | boolean | undefined | No | The showValue member uses the boolean | undefined contract. | — |
disabled | boolean | undefined | No | The disabled member uses the boolean | undefined contract. | — |
readOnly | boolean | undefined | No | The readOnly member uses the boolean | undefined contract. | — |
slots | Partial<SlotComponents<{ root: import("../../../registry/data-display/text").TextProps; }>> | undefined | No | The slots member uses the Partial<SlotComponents<{ root: import("../../../registry/data-display/text").TextProps; }>> | undefined contract. | SlotComponents, TextProps |
slotProps | Partial<SlotProps<{ root: import("../../../registry/data-display/text").TextProps; }, ProgressState>> | undefined | No | The slotProps member uses the Partial<SlotProps<{ root: import("../../../registry/data-display/text").TextProps; }, ProgressState>> | undefined contract. | SlotProps, TextProps |
unstyled | boolean | undefined | No | The unstyled member uses the boolean | undefined contract. | — |
variant | string | undefined | No | The variant member uses the string | undefined contract. | — |
size | "sm" | "md" | "lg" | undefined | No | The size member uses the "sm" | "md" | "lg" | undefined contract. | — |
No events are emitted.
Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.
Interaction and capabilities
Read-only; update props as application state changes.
The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.
Complete import
import { Progress } from "@/components/tuil/feedback/alert";