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 2

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 name	Type	Default Value
block	bool	false
branding	string	'default'
showDone	bool	false
useAnimation	bool	false
children	node
className	string
duration	string
isClosed	bool
onAnimationEnd	func
onSelect	func

Step

Prop name	Type	Default Value
onSelected	func	() => {}
children	node
className	string
isDone	bool
isSelected	bool
name	string
useAnimation	bool

Accessibility

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