Path (Progress Indicator) generator
The Sales Path pattern — Qualify → Meet & Present → Propose → Closed — is one of the most recognizable Salesforce UI patterns. Style completed, current and upcoming stage colors to match your brand while keeping the pattern instantly familiar.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-progress-indicator current-step={currentStep} type="path" class="studio-path">
<lightning-progress-step label="Qualify" value="step1"></lightning-progress-step>
<lightning-progress-step label="Meet & Present" value="step2"></lightning-progress-step>
<lightning-progress-step label="Propose" value="step3"></lightning-progress-step>
<lightning-progress-step label="Closed Won" value="step4"></lightning-progress-step>
</lightning-progress-indicator>
</template>Design tips for path (progress indicator)s
- Keep "completed" and "current" colors clearly distinct — users scan this component for exactly one thing: where am I now.
- Do not use more than 5–6 stages; the chevron pattern gets cramped and hard to read beyond that.
- Reserve your most saturated accent color for the current stage so it visually "leads" the eye forward.
Related components
Components developers commonly compare against or pair with Path (Progress Indicator).