StepIndicator | UI components (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

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

ui-extension-component-stepindicator

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.

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

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

Related components

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