SGDS Progress Bar Component Skill

<sgds-progress-bar> renders a horizontal progress bar. Always provide ariamin, ariamax, and arialabel for accessibility.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Primary/brand coloured bar? → variant="primary" (default)

Neutral grey bar? → variant="neutral"

Show a visible label inside the bar? → Set label

Accessible label for screen readers? → Always set arialabel