Components

Stepper

Stepper used in wizards to indicate users progress.

Components

Sprkl support completed, active and default states to indicate on which step the user is. In order to give more context you can use steppers signs with numbers.

Default

Stepper / default /
Stepper / default (Numbers) /
3
3
4
3
4
5

Vertical

Stepper / Vertical /
STEP 1
Completed step
STEP 2
Current step
STEP 3
Default step
STEP 1
Completed step
STEP 2
Current step
STEP 3
Default step
STEP 4
Default step
STEP 1
Completed step
STEP 2
Current step
STEP 3
Default step
STEP 4
Default step
STEP 5
Default step

Text

Stepper / Text /
STEP 1
Completed Step
STEP 2
Current Step
STEP 3
Default Step
STEP 1
Completed Step
STEP 2
Current Step
STEP 3
Default Step
STEP 4
Default Step
STEP 1
Completed Step
STEP 2
Current Step
STEP 3
Default Step
STEP 4
Default Step
STEP 5
Default Step

Customize

You can customize the component whatewer you want. It may be connected through the line to show the sequence of the path, passed and future points as horizontal as vertical. The number of steps is not restricted. Steps can be indicated by lines and text.

Stepper Signs
01
01