Examples
Props
Progress
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | null | Adds accessible text to the ProgressBar. Required when title not used and there is not any label associated with the progress bar |
| aria-labelledby | string | null | Associates the ProgressBar with it's label for accessibility purposes. Required when title not used |
| className | string | '' | Classname for progress component. |
| helperText | React.ReactNode | Content which can be used to convey additional information about the progress component. We recommend the helper text component as it was designed for this purpose. | |
| id | string | '' | DOM id for progress component. |
| isTitleTruncated | boolean | false | Indicate whether to truncate the string title |
| label | React.ReactNode | null | Text description of current progress value to display instead of percentage. |
| max | number | 100 | Maximum value of progress. |
| measureLocation | 'outside' | 'inside' | 'top' | 'none' | ProgressMeasureLocation.top | Where the measure percent will be located. |
| min | number | 0 | Minimal value of progress. |
| size | 'sm' | 'md' | 'lg' | null | Size variant of progress. |
| title | React.ReactNode | '' | Title above progress. The isTitleTruncated property will only affect string titles. Node title truncation must be handled manually. |
| tooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top' | Position of the tooltip which is displayed if title is truncated |
| value | number | 0 | Actual value of progress. |
| valueText | string | null | Accessible text description of current progress value, for when value is not a percentage. Use with label. |
| variant | 'danger' | 'success' | 'warning' | null | Status variant of progress. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-progress | --pf-v6-c-progress--GridGap | 1rem | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress__bar--Height | 1rem | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress__bar--BackgroundColor | (In light theme) #e0e0e0 | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress__measure--m-static-width--MinWidth | 4.5ch | ||
| .pf-v6-c-progress | --pf-v6-c-progress__status--Gap | 0.5rem | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress__status-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress__indicator--Height | 1rem | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress__indicator--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress__helper-text--MarginBlockStart | calc(0.5rem - 1rem) | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress--m-success__indicator--BackgroundColor | (In light theme) #3d7317 | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress--m-warning__indicator--BackgroundColor | (In light theme) #ffcc17 | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress--m-danger__indicator--BackgroundColor | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress--m-success__status-icon--Color | (In light theme) #3d7317 | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress--m-warning__status-icon--Color | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress--m-danger__status-icon--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress--m-inside__indicator--MinWidth | 2rem | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress--m-inside__measure--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress--m-success--m-inside__measure--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress--m-warning--m-inside__measure--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress--m-danger--m-inside__measure--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress--m-inside__measure--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress--m-outside__measure--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress--m-sm__bar--Height | 0.5rem | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress--m-sm__measure--FontSize | 0.75rem | ||
| ||||
| .pf-v6-c-progress | --pf-v6-c-progress--m-lg__bar--Height | 1.5rem | ||
| ||||
| .pf-v6-c-progress.pf-m-sm | --pf-v6-c-progress__bar--Height | 0.5rem | ||
| ||||
| .pf-v6-c-progress.pf-m-lg | --pf-v6-c-progress__bar--Height | 1.5rem | ||
| ||||
| .pf-v6-c-progress.pf-m-success | --pf-v6-c-progress__indicator--BackgroundColor | (In light theme) #3d7317 | ||
| ||||
| .pf-v6-c-progress.pf-m-success | --pf-v6-c-progress__status-icon--Color | (In light theme) #3d7317 | ||
| ||||
| .pf-v6-c-progress.pf-m-success | --pf-v6-c-progress--m-inside__measure--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-progress.pf-m-warning | --pf-v6-c-progress__indicator--BackgroundColor | (In light theme) #ffcc17 | ||
| ||||
| .pf-v6-c-progress.pf-m-warning | --pf-v6-c-progress__status-icon--Color | (In light theme) #dca614 | ||
| ||||
| .pf-v6-c-progress.pf-m-warning | --pf-v6-c-progress--m-inside__measure--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-progress.pf-m-danger | --pf-v6-c-progress__indicator--BackgroundColor | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-progress.pf-m-danger | --pf-v6-c-progress__status-icon--Color | (In light theme) #b1380b | ||
| ||||
| .pf-v6-c-progress.pf-m-danger | --pf-v6-c-progress--m-inside__measure--Color | (In light theme) #ffffff | ||
| ||||