Progress tracker

Progress trackers guide users through a multi-steps process by letting them know what has already been done and how much is left to complete a task. Apart from showing the number of steps, progress trackers display the current location of the user within the process and allow navigation between the past steps.

UX/UI Guidelines

Check the design documentation of the component in ZeroHeight.

Implementations

The component ProgressTracker is available in the following technologies:

Web Components

Parameters

Parameters

Make sure you have read about the parameters in here.

The parametrization of the component can be done with the following custom params or properties:

Name	Type	Slot	Description
steps	object[]		Steps of the progress tracker
config	string		Configuration of the progress tracker
model	number		Current step. Between 1 and 10
name	string		Name of the input
custom	object		A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as an JS object in stringified JSON format. Example: <z-progress-tracker custom='{"fill":"#06e7a3"}' /> Check the available values in the customization section.
custom-str	string		The stringified version of the custom property. It follows the pattern key:value;key:value;, with the possibility of setting multiple values and spaces between the punctuation characters. Example: <z-progress-tracker custom-str="fill:#06e7a3" />
z-theme	string		Sets the theme of the component. The possible values are light and dark. <z-progress-tracker z-theme="dark" />

From Figma to code

...

Customization

INFO

Check everything about the customization mechanics in the "How it works" documentation.

No customization tokens yet implemented for this component

Accessibility

...