Controls

Stepper

Storybook

The Stepper component is an ideal tool for showing the progress of a sequence of steps in a task or process. With this component, you can customize the appearance of a circular progress bar, making it easy to see task progress. In addition, the Stepper offers a clear and accessible interface so that users can easily follow the steps of a task and understand where they are in the process. With this tool, you can significantly improve the user experience on your web or mobile applications and provide clear and easy progress tracking for any task.

Imports

The first alternative is recommended since they can reduce the application bundle

1import Stepper from 'dd360-ds/Stepper'

1import { Stepper } from 'dd360-ds'

Usage

Use the Stepper component as shown below:

The code snippet below shows how to use the Stepper component:

1import  Stepper from 'dd360-ds/Stepper'
2
3<Stepper phase={1} totalPhases={4} width="5rem" />
4

FontSize

With the prop fontSize you can customize the size of the text

1import  Switch from 'dd360-ds/Switch'
2
3<Stepper phase={1} totalPhases={4} width="5rem" fontSize="2rem" />
4

TextColor

With the prop textColor you can customize the color of the text

1import  Switch from 'dd360-ds/Switch'
2
3<Stepper phase={1} totalPhases={4} width="5rem" textColor="#d62c2c" />
4

StrokeWidth

With the prop strokeWidth you can customize the thickness of the stepper

1import  Switch from 'dd360-ds/Switch'
2
3<Stepper phase={1} totalPhases={4} width="5rem" strokeWidth={15} />
4

StrokeColor

With the prop strokeColor you can customize the color of the stepper

1import  Switch from 'dd360-ds/Switch'
2
3<Stepper phase={1} totalPhases={4} width="5rem" strokeColor="#2ac948" />
4

Text

With the prop text you can add a custom text in case you don't need to show the steps

1import  Switch from 'dd360-ds/Switch'
2
3<Stepper phase={1} totalPhases={4} width="5rem" text="25%" />
4

API Reference