Hero Image

Components

Step Indicator

Play around with props, edit and copy code.

Basic examples

Advanced examples

Step indicator can animate in different ways. Below you can test the different variants that are available.

Step 1
Step 1
Step 2
Step 2
Step 3
Step 3
<StepIndicator useAnimation>
  <Step
    isSelected
    name="register"
  >
    Step 1
  </Step>
  <Step
    name="limits"
  >
    Step 2
  </Step>
  <Step
    name="deposit"
  >
    Step 3
  </Step>
</StepIndicator>

Properties

StepIndicator

Prop nameTypeDefault ValueDescription
blockboolfalse
brandingstring'default'
showDoneboolfalse
useAnimationboolfalse
childrennode
classNamestring
durationstring
isClosedbool
onAnimationEndfunc
onSelectfunc

Step

Prop nameTypeDefault ValueDescription
onSelectedfunc() => {}
childrennode
classNamestring
isDonebool
isSelectedbool
namestring
useAnimationbool

Accessibility

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.

Read more about WCAG 2.1 AA.