Multi-Step Tracker
Multi-step trackers indicate a customer’s progress through a series of linear, discrete steps. While the individual steps may be unrelated to each other in content, as a whole they are required for the customer to complete the intended action.
Import
Default Multi-Step Tracker
With Substeps
Without Substeps
With Security
No Icons
Multi-Step Tracker (Compact)
With Substeps
Without Substeps
With Security
No Icons
Props
MultiStep Tracker Props
| Name | Description | Default |
|---|---|---|
| id | Unique identifier for the multi-step tracker. string | - |
| children* | Child elements of the multi-step tracker, typically Step components. NonNullable<ReactNode> | - |
| currentStep | The current step number in the multi-step tracker. number | 1 |
| currentSubStep | The current sub-step number within the current step. number | - |
| variant | The variant of the multi-step tracker, can be 'default' or 'compact'. "default" | "compact" | - |
| labelOverrides | Overrides for labels that have been defaulted in the component. MultiStepTrackerLabelOverrides | - |
Step Props
| Name | Description | Default |
|---|---|---|
| label* | The label text for the step. string | - |
| icon | The icon to be displayed for the step. ReactElement<any, string | JSXElementConstructor<any>> | - |
| securityConfig | Configuration for security-related aspects of the step. SecurityConfig | - |
| subStepLabels | Labels for sub-steps within the step. string[] | [] |
| labelOverrides | Overrides for labels that have been defaulted in the component. StepLabelOverrides | - |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.