Options

Basic usage

Each step is an li directly inside the container. This component supports a maximum of 10 progress steps.

Indicating progress

Adding the css modifier --X (where X is a number between 1 and 10) will style the progress up to the selected step.

Icons

You can set specific icons for each step using standard SDS --icon-* classes

Colors

You can control the highlight color of both the progress bar and current step icon/text color by setting a standard sds --color-* var on the container element.

Setting a color on a list item, will change the color used when that list item is the current step

You can combine both color options to set the default colors, plus item specific colors.

Styles

Vertical

You can display the progress steps vertically by add the --vertical class to the container element.