Process
The Process component is used to visually represent a sequence of steps or stages in a process or workflow. It helps users easily follow the progression of tasks or actions, often with the use of numbered steps, icons, or progress indicators. The Process component can be customized to fit various design styles and is perfect for guiding users through multi-step tasks or processes. Add a container element with the
.process
class and add child elements with the .item
class. Also through the .active
or .failed
class will be highlighted items and indicate the current state of process.
Failed Process
Vertical Process
Also, just add the .vertical
class to .process
to make it vertical style.
Vertical style is also used for mobile devices.
Reversed Vertical Process
And also, you can reverse the items of process using by .reversed
class.
Default Class Name | Combinators |
---|---|
process |
.process |
item |
.process .item |
active |
.process .active.item |
failed |
.process .failed.item |
Positions | Combinators |
vertical |
.vertical.process |
reversed (only for vertical position) |
.reversed.vertical.process |
Styles | Combinators |
success |
.success.process |
warning |
.warning.process |
error |
.error.process |
dark |
.dark.process |