//
Displays an indicator showing the completion progress of a task.
bun add xiod-ui1import {2 Progress,3 ProgressIndicator,4 ProgressLabel,5 ProgressTrack,6 ProgressValue7} from "xiod-ui/progress";1<Progress>2 <ProgressLabel />3 <ProgressIndicator />4 <ProgressTrack />5 <ProgressValue />6</Progress>| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default"| "expressive"| undefined | default | |
size | "default"| "sm"| "lg"| "xl"| "2xl"| undefined | default | |
aria-valuetext | string| undefined | - | A string value that provides a user-friendly name for `aria-valuenow`, the current value of the progress bar. |
format | NumberFormatOptions| undefined | - | Options to format the value. |
getAriaValueText | ((formattedValue: string, value: number| null) => string)| undefined | - | Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar. |
locale | LocalesArgument | - | The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale. |
max | number| undefined | 100 | The maximum value. |
min | number| undefined | 0 | The minimum value. |
valueReq | number| null | - | The current value. The component is indeterminate when value is `null`. |
className | string| ((state: ProgressRootState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, ProgressRootState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: ProgressRootState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: ProgressIndicatorState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, ProgressIndicatorState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: ProgressIndicatorState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: ProgressLabelState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, ProgressLabelState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: ProgressLabelState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: ProgressTrackState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, ProgressTrackState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: ProgressTrackState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
style | CSSProperties| ((state: ProgressValueState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | string| ((state: ProgressValueState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, ProgressValueState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |