Progress Bar - Keep React
Table of Contents#
- Default Progress
- Progress Style Variant
- Progress Size Variant
- Progress Colors Variant
- Progress with Progress Number
- Progress with Popup
- API Reference
Default Progress#
Default Progress allows you to visually represent the progress or completion of a task or process.
Progress Style Variant#
The Progress component in our design system comes with two style options: rounded and bordered
Progress Size Variant#
Progress component supports multiple sizes to fit your design needs. Here is available sizes options for the progress component in our design system sm md lg and lg.
Progress Colors Variant#
The Progress component offers various color options to suit your design preferences.Here is available colors options for the progress component in our design system info error success warning indigo and purple.
Progress with Progress Number#
You can enhance the Progress component by adding a progress number that indicates the completion percentage of a task or process. This feature is particularly useful for providing users with a clear numeric representation of progress.
Progress with Popup#
The Progress component can be augmented with a popup that displays the progress percentage in a more detailed manner with showPopupLabelProgress={true} props.
API Reference#
Explore the available props for the Progress component:
| Property | Description | Type | Default |
|---|---|---|---|
| color | Defines the available color options for progress. | info error success warning indigo purple | info |
| size | Defines the available sizes options for progress. | sm md lg xl | md |
| label | Progress level text. | string | Text |
| labelPosition | Defines the available position for progress label. | inside outside none | outside |
| labelProgress | Specifies whether the progress label is shown. | boolean | false |
| showPopupLabelProgress | Specifies whether the popup label progress is shown. | boolean | false |
| rounded | Specifies whether the progress bar is rounded. | boolean | false |
| bordered | Specifies whether the progress bar is bordered. | boolean | false |
| progress | Defines the progress control for the progress bar. | number | 45 |