Skip to main contentCarbon Design System

Progress indicator

Preview the progress indicator component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

Live demo

<div className="some-container">
<ProgressIndicator currentIndex={1}>
<ProgressStep
label="First step"
description="Step 1: Getting started with Carbon Design System"
/>
<ProgressStep
current
label="Second step with tooltip"
description="Step 2: Getting started with Carbon Design System"
renderLabel={() => (
<Tooltip
direction="bottom"
showIcon={false}
triggerClassName="cds--progress-label"
triggerText="Second step with tooltip"
tooltipId="tooltipId-0">
<p>Second step with tooltip</p>
</Tooltip>
)}
/>
<ProgressStep
label="Third step"
description="Step 3: Getting started with Carbon Design System"
secondaryLabel="Optional label"
/>
<ProgressStep
invalid
label="Fourth step"
description="Step 4: Getting started with Carbon Design System"
/>
<ProgressStep
disabled
label="Fifth step"
description="Step 5: Getting started with Carbon Design System"
/>
</ProgressIndicator>
</div>
ProgressStep
Modifiers
ProgressIndicator
Modifiers