# Progress indicator

```js
<ProgressIndicator>
  <ProgressStep label="Complete" complete />
  <ProgressStep label="Current" current />
  <ProgressStep label="Pending" />
  <ProgressStep label="Error" error />
  <ProgressStep label="Deleted" disabled />
</ProgressIndicator>
```

## Example implementation

```jsx
() => {
  const [step, setStep] = React.useState(1);
  const [pressed, setPressed] = React.useState(false);

  return (
    <SilkeBox column>
      <ProgressIndicator>
        {[1, 2, 3, 4].map((index) => (
          <ProgressStep
            key={index}
            label={'Step' + index}
            complete={index < step}
            current={step === index}
            error={index === 2 && step > 2 && !pressed}
            disabled={index === 4 && !pressed}
            onClick={() => setStep(index)}
          />
        ))}
      </ProgressIndicator>
      <SilkeBox align="spread" pad>
        <SilkeButton label="Back" onClick={() => setStep(Math.max(step - 1, 1))} />
        {step === 2 && (
          <SilkeButton
            kind="secondary"
            label="Must press this"
            onClick={() => setPressed(true) || setStep(3)}
          />
        )}
        <SilkeButton label="Next" onClick={() => setStep(Math.min(step + 1, 4))} />
      </SilkeBox>
    </SilkeBox>
  );
};
```