> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: ffb93cdf-50bd-4a03-b028-568b6f5f1b16
---

# StepIndicator

> Learn about the StepIndicator component for use in UI extensions.

The `StepIndicator` component renders an indicator to show the current step of a multi-step process.

![ui-extension-component-stepindicator](https://www.hubspot.com/hubfs/Knowledge_Base_2023-24-25/ui-extension-stepindicator-component.png)

```jsx theme={null}
import { Flex, Box, StepIndicator, Button } from "@hubspot/ui-extensions";

hubspot.extend(() => <Extension />);

function Extension() {
  const [currentStep, setCurrentStep] = useState(0);

  return (
    <Flex direction="column" gap="md">
      <StepIndicator currentStep={currentStep} stepNames={["First", "Second", "Third"]} />
      <Box>
        <Button onClick={() => setCurrentStep(currentStep - 1)}>Previous</Button>
        <Button onClick={() => setCurrentStep(currentStep + 1)}>Next</Button>
      </Box>
    </Flex>
  );
}
```

## Props

| Prop | Type | Description |
| - | - | - |
| `circleSize` | `'xs'`, `'extra-small'`, \| `'sm'`, `'small'` (default) \| `'md'`, `'medium'` \| `'lg'`, `'large'` \| `'xl'`, `'extra-large'` | The size of the indicator circles. See the [variants section](#variants) for examples of sizing. |
| `currentStep` | Number | The currently active step. Steps are zero-based, meaning the first step is assigned `0`. |
| `direction` | `'horizontal'` (default) \| `'vertical'` | The orientation of the indicator. |
| `onClick` | `(stepIndex: number) => void` | A function that is invoked when a step in the indicator is clicked. The function receives the current step index as an argument (zero-based). Use this to update the currently active step. |
| `stepNames` | Array | An array containing the name of each step. |
| `variant` | `'flush'` \| `'default'` (default) \| `'compact'` | Sets component spacing.<ul><li>`compact`: only shows the title of the currently active step.</li><li>`flush`: only shows the title of the currently active step and removes left and right margin.</li></ul> |

## Variants

By default, the step indicator will be laid out horizontally, but you can use the `direction` prop to set the orientation to `vertical` instead.

![stepindicator-vertical-alignment](https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/stepindicator-vertical-alignment.png)

In addition, you can set the size of the step circles using the `circleSize` prop, ranging from `'xs'`/`'extra-small'` to `'xl'`/`'extra-large'`.

![stepindicator-circlesize-variations](https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/stepindicator-circlesize-variations.png)

## Related components

* [ProgressBar](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/progress-bar.md)
* [LoadingSpinner](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/loading-spinner.md)
* [Toggle](https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/toggle.md)