Steps component displays a navigation for wizard-like workflows.

activeStep

setActiveStep

size

() => {
  const [activeStep, setActiveStep] = useState(0);

  return (
    <PreviewContainer>
      <Steps activeStep={activeStep} setActiveStep={setActiveStep} size="small">
        <Steps.Step status="completed">Step 1</Steps.Step>
        <Steps.Step status="incomplete">Step 2</Steps.Step>
        <Steps.Step status="error">Step 3</Steps.Step>
        <Steps.Step status="incomplete" disabled disabledTooltip="Complete Step 3 first">
          Step 4
        </Steps.Step>
      </Steps>

      <Typography mt="$24" variant="body-medium">
        Step {activeStep + 1} is active
      </Typography>
    </PreviewContainer>
  );
}

Steps

() => {
  const [activeStep, setActiveStep] = useState(0);

  return (
    <PreviewContainer>
      <Steps activeStep={activeStep} setActiveStep={setActiveStep} size="large">
        <Steps.Step status="completed" stepIcon={IconActions}>
          Step 1
        </Steps.Step>
        <Steps.Step status="completed" stepIcon={IconNotebook}>
          Step 2
        </Steps.Step>
        <Steps.Step stepIcon={IconSearchArea}>Step 3</Steps.Step>
        <Steps.Step disabled disabledTooltip="Complete Step 3 first" stepIcon={IconAlarm}>
          Step 4
        </Steps.Step>
      </Steps>

      <Typography mt="$24" variant="body-medium">
        Step {activeStep + 1} is active
      </Typography>
    </PreviewContainer>
  );
}

Name	Description	Default
activeStep required	Current active step index	-
setActiveStep required	Set current active step by it's index	-
size	The size of the steps	-

Steps component

Preview Large