Step Component

Step / progress indicator with nodes, tracks, labels, and description. Uses data-role attributes (node, track, label, description, header) and data-selected="true" for the current step.

Notes

Basic usage

Default (horizontal)

With labels + description

1
Step 1
2
Step 2
Fill details
3
Step 3

With timestamps (header)

2024/5/6
1
Created
2024/6/8
2
Confirmed
2024/9/12
Shipped

Variants

step-solid (filled dot)

1
Step 1
2
Step 2
3
Step 3

step-plain (text only)

1
Step 1
2
Step 2
3
Step 3

step-between (justified)

1
Start
2
Middle
3
End

Reverse (step-reverse)

Completed steps become gray, upcoming steps remain colored.

Reverse with labels

1
Done
2
Done
3
Active
4
Pending

Vertical (step-v)

Vertical timeline

2024/5/6
1
Created
Order placed
2024/6/8
2
Confirmed
Payment received
2024/9/12
3
Shipped
Package sent

Vertical + reverse

2024/5/6
1
Done
2024/6/8
2
Done
2024/9/12
3
Active

Vertical + solid

2024/5/6
1
Step 1
2024/6/8
2
Step 2
2024/9/12
3
Step 3

Trim (step-trim)

Horizontal trim

1
Start
2
Middle
3
End

Vertical trim

2024/5/6
1
Start
2024/6/8
2
Middle
2024/9/12
3
End

Pending (step-pending)

Default pending

1
Done
2
In progress
3
Pending

Solid + pending

1
Done
2
In progress
3
Pending

Theme colors

Primary / Secondary / Tertiary

1
primary
2
active
3
future
1
secondary
2
active
3
future
1
tertiary
2
active
3
future

Success / Error / Info

1
success
2
active
3
future
1
error
2
active
3
future
1
info
2
active
3
future

Highlight / Warning / Caution / Ink

1
highlight
2
active
3
future
1
warning
2
active
3
future
1
caution
2
active
3
future
1
ink
2
active
3
future

Title / Description / Caption / Disabled

1
title
2
active
3
future
1
description
2
active
3
future
1
caption
2
active
3
future
1
disabled
2
active
3
future

Solid + theme colors

1
primary
2
active
3
future
1
success
2
active
3
future
1
error
2
active
3
future

Custom colors

Multiple color formats are supported:

1
blue-500
2
active
3
future
1
solid blue
2
active
3
future

Node with image