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. |
| 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
| .pf-c-progress | --pf-c-progress--GridGap | 1rem | |
| .pf-c-progress | --pf-c-progress__bar--before--BackgroundColor | #06c | |
| .pf-c-progress | --pf-c-progress__bar--Height | 1rem | |
| .pf-c-progress | --pf-c-progress__bar--BackgroundColor | #fff | |
| .pf-c-progress | --pf-c-progress__measure--m-static-width--MinWidth | 4.5ch | |
| .pf-c-progress | --pf-c-progress__status-icon--Color | #151515 | |
| .pf-c-progress | --pf-c-progress__status-icon--MarginLeft | 0.5rem | |
| .pf-c-progress | --pf-c-progress__bar--before--Opacity | .2 | |
| .pf-c-progress | --pf-c-progress__indicator--Height | 1rem | |
| .pf-c-progress | --pf-c-progress__indicator--BackgroundColor | #06c | |
| .pf-c-progress | --pf-c-progress--m-success__bar--BackgroundColor | #3e8635 | |
| .pf-c-progress | --pf-c-progress--m-warning__bar--BackgroundColor | #f0ab00 | |
| .pf-c-progress | --pf-c-progress--m-danger__bar--BackgroundColor | #c9190b | |
| .pf-c-progress | --pf-c-progress--m-success__status-icon--Color | #3e8635 | |
| .pf-c-progress | --pf-c-progress--m-warning__status-icon--Color | #f0ab00 | |
| .pf-c-progress | --pf-c-progress--m-danger__status-icon--Color | #c9190b | |
| .pf-c-progress | --pf-c-progress--m-inside__indicator--MinWidth | 2rem | |
| .pf-c-progress | --pf-c-progress--m-inside__measure--Color | #fff | |
| .pf-c-progress | --pf-c-progress--m-success--m-inside__measure--Color | #fff | |
| .pf-c-progress | --pf-c-progress--m-warning--m-inside__measure--Color | #151515 | |
| .pf-c-progress | --pf-c-progress--m-inside__measure--FontSize | 0.875rem | |
| .pf-c-progress | --pf-c-progress--m-outside__measure--FontSize | 0.875rem | |
| .pf-c-progress | --pf-c-progress--m-sm__bar--Height | 0.5rem | |
| .pf-c-progress | --pf-c-progress--m-sm__description--FontSize | 0.875rem | |
| .pf-c-progress | --pf-c-progress--m-sm__measure--FontSize | 0.875rem | |
| .pf-c-progress | --pf-c-progress--m-lg__bar--Height | 1.5rem | |
| .pf-c-progress.pf-m-sm | --pf-c-progress__bar--Height | 0.5rem | |
| .pf-c-progress.pf-m-lg | --pf-c-progress__bar--Height | 1.5rem | |
| .pf-c-progress.pf-m-success | --pf-c-progress__bar--before--BackgroundColor | #3e8635 | |
| .pf-c-progress.pf-m-success | --pf-c-progress__status-icon--Color | #3e8635 | |
| .pf-c-progress.pf-m-success | --pf-c-progress--m-inside__measure--Color | #fff | |
| .pf-c-progress.pf-m-warning | --pf-c-progress__bar--before--BackgroundColor | #f0ab00 | |
| .pf-c-progress.pf-m-warning | --pf-c-progress__status-icon--Color | #f0ab00 | |
| .pf-c-progress.pf-m-warning | --pf-c-progress--m-inside__measure--Color | #151515 | |
| .pf-c-progress.pf-m-danger | --pf-c-progress__bar--before--BackgroundColor | #c9190b | |
| .pf-c-progress.pf-m-danger | --pf-c-progress__status-icon--Color | #c9190b | |
View source on GitHub
