Progress Steps

Options

Basic usage

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

html

Copy

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.

html

Copy

Demo controls

ds-progress-steps --3

Icons

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

html

Copy

Demo controls

ds-progress-steps --3

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.

Container colors

html

Copy

Demo controls

ds-progress-steps --3

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

List item colors

html

Copy

Demo controls

ds-progress-steps --1

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

Container and list colors

html

Copy

Demo controls

ds-progress-steps --1

Styles

Vertical

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

Vertical style

html

Copy

Demo controls

ds-progress-steps --3

Vertical style with icons

html

Copy

Demo controls

ds-progress-steps --3

Manifest

The component manifest describes this component's API — its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.

Latest version: https://assets.soracom.io/sds/latest/ds-progress-steps/index.mjs

index.mjs

Copy