## Examples

Progress steppers have default icons associated with the `variant` property, and may be overriden and customized using the `icon` property.

### Basic


import ProgressStepperBasic from "./ProgressStepperBasic.tsx?raw"

<LiveExample src={ProgressStepperBasic} />

### With step descriptions


import ProgressStepperBasicWithDescription from "./ProgressStepperBasicWithDescription.tsx?raw"

<LiveExample src={ProgressStepperBasicWithDescription} />

### With alignment


import ProgressStepperBasicWithAlignment from "./ProgressStepperBasicWithAlignment.tsx?raw"

<LiveExample src={ProgressStepperBasicWithAlignment} />

### Compact

Compact progress steppers will only display the current step's `title`, and will not display any steps' `description` texts.


import ProgressStepperCompact from "./ProgressStepperCompact.tsx?raw"

<LiveExample src={ProgressStepperCompact} />

### With an issue


import ProgressStepperBasicIssue from "./ProgressStepperBasicIssue.tsx?raw"

<LiveExample src={ProgressStepperBasicIssue} />

### With a failure


import ProgressStepperBasicFailure from "./ProgressStepperBasicFailure.tsx?raw"

<LiveExample src={ProgressStepperBasicFailure} />

### With custom icons


import ProgressStepperCustomIcons from "./ProgressStepperCustomIcons.tsx?raw"

<LiveExample src={ProgressStepperCustomIcons} />

### With help popover

To add a popover to a progress step, set the `popoverRender` properties on the `ProgressStep` component.


import ProgressStepperHelpPopover from "./ProgressStepperHelpPopover.tsx?raw"

<LiveExample src={ProgressStepperHelpPopover} />