Examples
Truncate title
Very very very very very very very very very very very long title which should be truncated if it does not fit onto one line above the progress bar
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__bar--BorderRadius | 16px | ||
| ||||
| .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 | ||
| ||||