Description
The progress bar, despite providing a good user experience, also helps users avoid frustration and successfully complete all the steps.
Usage
- Progress dot indicators
const steps = [
'Cart', 'Billing', 'Delivery', 'Review & pay'
];
<Progress
progress={2}
onChange={({event, step}) => {}}
steps={steps}/>
- Progress dot indicators + steps counter
<Progress
progress={3}
type="count"
onChange={({event, step}) => {}}
steps={steps}/>
- Progress text
<Progress
progress={1}
type="text"
onChange={({event, step}) => {}}
steps={steps}/>
- Progress + text + completed icon
<Progress
progress={4}
type="text icon"
onChange={({event, step}) => {}}
steps={steps}/>
API
props
as follow:
Progress can receive a number of NAME | TYPE | DEFAULT |
---|---|---|
steps | Array | [] |
progress | Number | 0 |
type | Text | dots |
onChange | Function | () => {} |