Steps is a component set for displaying a sequence of stages in a process or workflow. It helps users visualize progress through a multi-step journey with customizable colors and orientations.
The Steps component wraps multiple Step components to display a sequence of stages in a process or workflow.
| Steps Props | Type | Description |
|---|---|---|
orientation | string | Sets the orientation of the steps. Options: - |
| vertical | boolean | Shortcut for |
| horizontal | boolean | Shortcut for |
| Steps Slots | Description |
|---|---|
default | The default slot. Content to be displayed inside the steps container. Typically contains |
The Step component represents an individual stage in a process or workflow. It can be customized with different colors and glyphs.
| Step Props | Type | Description |
|---|---|---|
glyph | string | Allows placing a custom character or emoji in the step's circle. If not provided, the step will display a number based on its position. For more complex icons, consider using the StepIcon component instead. |
color | string | Sets the color of the step. Options: - |
| neutral | boolean | Shortcut for |
| primary | boolean | Shortcut for |
| secondary | boolean | Shortcut for |
| accent | boolean | Shortcut for |
| info | boolean | Shortcut for |
| success | boolean | Shortcut for |
| warning | boolean | Shortcut for |
| error | boolean | Shortcut for |
| Step Slots | Description |
|---|---|
default | The default slot. Content to be displayed as the step label. |
The StepIcon component provides a container for custom icons within a step.
| StepIcon Slots | Description |
|---|---|
default | The default slot. Content to be displayed as the custom icon, typically an SVG or icon component. |
A sequence of steps in a horizontal layout.
A sequence of steps in a vertical layout.
Steps that are vertical by default but switch to horizontal on large screens.
Steps using custom glyphs or characters.
Steps using color props and glyphs for error/info states.
A long sequence of steps with mixed color props.