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}><ProgressSteplabel="First step"description="Step 1: Getting started with Carbon Design System"/><ProgressStepcurrentlabel="Second step with tooltip"description="Step 2: Getting started with Carbon Design System"renderLabel={() => (<Tooltipdirection="bottom"showIcon={false}triggerClassName="cds--progress-label"triggerText="Second step with tooltip"tooltipId="tooltipId-0"><p>Second step with tooltip</p></Tooltip>)}/><ProgressSteplabel="Third step"description="Step 3: Getting started with Carbon Design System"secondaryLabel="Optional label"/><ProgressStepinvalidlabel="Fourth step"description="Step 4: Getting started with Carbon Design System"/><ProgressStepdisabledlabel="Fifth step"description="Step 5: Getting started with Carbon Design System"/></ProgressIndicator></div>