Progress Indicator Component

A progress indicator component displaying multiple steps.

Example

Properties

Name	Type	Default	Description
max	number	2	The total number of steps.
current	number	0	The current step index.

CSS Parts

Name	Description
progressbar	The container for the progress bar.
step	Each individual step in the progress bar.

Check this link to learn how to use CSS parts for Progress Indicator Component.

CSS Properties

Token	Default	Description
--tap-progress-indicator-progressbar-color	--tap-sys-spacing-3	The gap between steps.
--tap-progress-indicator-step-height	--tap-sys-spacing-3	The height of each step.
--tap-progress-indicator-step-background-color	--tap-sys-color-surface-tertiary	The background color of each step.
--tap-progress-indicator-active-step-background-color	--tap-sys-color-border-inverse-primary	The background color of active steps.