## Examples

### Basic


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

<LiveExample src={ProgressBasic} />

### Small


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

<LiveExample src={ProgressSmall} />

### Large


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

<LiveExample src={ProgressLarge} />

### Outside


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

<LiveExample src={ProgressOutside} />

### Inside


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

<LiveExample src={ProgressInside} />

### Single line


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

<LiveExample src={ProgressSingleLine} />

### Without measure


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

<LiveExample src={ProgressWithoutMeasure} />

### Finite step


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

<LiveExample src={ProgressFiniteStep} />

### Progress with step instructions


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

<LiveExample src={ProgressStepInstruction} />

### Truncate title


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

<LiveExample src={ProgressTruncateTitle} />

### Title outside of progress bar


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

<LiveExample src={ProgressTitleOutsideOfProgressBar} />

### Helper text


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

<LiveExample src={ProgressHelperText} />

## Status examples

When conveying status, you should ensure:

- There is visible helper text that explains the status.
- The helper text includes the status icon, as seen in our [basic helper text example](/components/helper-text#basic).
- The helper text is linked to the `<Progress>` component via the `aria-describedby` property, as seen in the [progress helper text example](#helper-text).

### Success


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

<LiveExample src={ProgressSuccess} />

### Failure


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

<LiveExample src={ProgressFailure} />

### Warning


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

<LiveExample src={ProgressWarning} />

### Inside success


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

<LiveExample src={ProgressInsideSuccess} />

### Outside failure


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

<LiveExample src={ProgressOutsideFailure} />

### Failure without measure


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

<LiveExample src={ProgressFailureWithoutMeasure} />