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 name | Type | Default Value | Description |
---|---|---|---|
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 | Description |
---|---|---|---|
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.