Documentation
Components
Steps

Steps

Position

Use top bottom left right classes to control the position of steps.

Preview

Code

HTML

Code

JSX/TSX
Register
Choose plan
Purchase
Receive Product
Preview

Code

HTML

Code

JSX/TSX
Register
Choose plan
Purchase
Receive Product
Preview

Code

HTML

Code

JSX/TSX
Register
Choose plan
Purchase
Receive Product
Preview

Code

HTML

Code

JSX/TSX
Register
Choose plan
Purchase
Receive Product

Active waypoints

Use active active-point classes to control the activation of steps.

  • active: will activate bar and dot of steps.
  • active-point: will only activate dot part of the step.
Preview

Code

HTML

Code

JSX/TSX
Register
Choose plan
Purchase
Receive Product

Shape

Use cornered square classes to control the shape of step's waypoint. Defaults to circle.

Preview

Code

HTML

Code

JSX/TSX
Register
Choose plan
Purchase
Receive Product
Register
Choose plan
Purchase
Receive Product

Custom content

And you can customize the content of step's waypoint. Just add the data-content attribute on it.

Preview

Code

HTML

Code

JSX/TSX

Checked

Empty

Star

circle

emoji