Progress Indicator

A Progress Indicator is an interactive component representing progress in a linear, multi-step process.

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example


                                                        
                                                        
                                                            import { ProgressIndicator } from '@optimus-web/core';
                                                        
                                                        <ProgressIndicator
                                                            steps={[
                                                                {
                                                                    value: 'completed',
                                                                    label: 'Completed',
                                                                    optional: true,
                                                                    completed: true,
                                                                },
                                                                {
                                                                    value: 'completed2',
                                                                    label: 'Completed 2',
                                                                    completed: true,
                                                                    editable: true,
                                                                },
                                                                {
                                                                    value: 'active',
                                                                    label: 'Active',
                                                                },
                                                                {
                                                                    value: 'next',
                                                                    label: 'Next',
                                                                },
                                                                {
                                                                    value: 'enabled',
                                                                    label: 'Enabled',
                                                                    editable: true,
                                                                    optional: true,
                                                                },
                                                                {
                                                                    value: 'disabled',
                                                                    label: 'Disabled',
                                                                },
                                                            ]}
                                                            activeStep="active"
                                                        />