---
title: StepperProgress
category: Indicators
summary: Use to convey progress through consecutive steps. Composes [GridView](/gridview).
---

```jsx live
render(() => {
  const [activeStepIndex, setActiveStepIndex] = React.useState(2)
  return (
    <StepperProgress width="50%" activeStepIndex={activeStepIndex}>
      {generateRange(4).map((step) => (
        <StepperProgress.Step
          key={step}
          renderEnd={
            <StackView padding={2}>
              <Button
                size="sm"
                title={step + 1}
                onClick={() => setActiveStepIndex(step)}
              />
            </StackView>
          }
        />
      ))}
    </StepperProgress>
  )
})
```

```jsx live
function Step({ active, activeColor, label, date, time = '--' }) {
  return (
    <StepperProgress.Step
      active={active}
      activeColor={activeColor}
      renderStart={<Text padding={2}>{label}</Text>}
      renderEnd={
        <StackView alignment="center" height={8} padding={2} spacing={1}>
          <Text size={5}>{date}</Text>
          <Text size={5} color="foregroundSecondary">
            {time}
          </Text>
        </StackView>
      }
    />
  )
}
render(
  <StackView width="100%" alignment="center">
    <StepperProgress autoColumns="minmax(80px, 120px)" activeStepIndex={1}>
      <Step label="Prepared" date="04/20" time="1:23pm" />
      <Step label="Sent" date="04/21" time="8:00am" />
      <Step label="Read" />
      <Step label="Declined" active activeColor="error" />
    </StepperProgress>
  </StackView>
)
```