StepIndicator | UI components (BETA)

  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

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


import { StepIndicator, Button } from '@hubspot/ui-extensions'; function Extension() { const [currentStep, setCurrentStep] = useState(0); return ( <> <StepIndicator currentStep={currentStep} stepNames={["First", "Second", "Third"]} /> <Button onClick={() => setCurrentStep(currentStep - 1)}> Previous </Button> <Button onClick={() => setCurrentStep(currentStep + 1)}> Next </Button> </> ); }
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 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.
stepNames Required Array An array containing the name of each step.
variant 'flush' | 'default' (default) | 'compact' Sets component spacing.
  • compact: only shows the title of the currently active step.
  • flush: only shows the title of the currently active step and removes left and right margin.
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.


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


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


Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.