⌘K

step-indicator component

Drop-in semantic component. See examples, sizes, variants, and source.

Multi-step progress indicator built from a steps container holding step children. Each step has an indicator, an optional content block, and a connector. Apply active / completed / disabled per step.

Step Indicator

Basic Horizontal Steps

1
Personal Info
Basic details
2
Account Setup
Create account
3
Preferences
Customize settings
4
Confirmation
Review & finish

Three Step Process

1
Choose Plan
2
Payment Details
3
Complete Order

Five Step Process

1
Start
2
Details
3
Configure
4
Review
5
Deploy

Step Indicator Sizes

Tiny Size

1
Step 1
2
Step 2
3
Step 3

Small Size

1
Step 1
2
Step 2
3
Step 3

Default Size

1
Step 1
2
Step 2
3
Step 3

Large Size

1
Step 1
2
Step 2
3
Step 3

Big Size

1
Step 1
2
Step 2
3
Step 3

Step Indicator Colors

Primary Color

1
Complete
2
In Progress
3
Upcoming

Positive Color

1
Complete
2
In Progress
3
Upcoming

Warning Color

1
Complete
2
In Progress
3
Upcoming

Purple Color

1
Complete
2
In Progress
3
Upcoming

Vertical Step Indicator

Basic Vertical Steps

1
Personal Information
Enter your name, email, and contact details
2
Account Setup
Choose username and password
3
Preferences
Customize your experience
4
Confirmation
Review and complete setup

Compact Vertical Steps

1
Upload Files
2
Processing
3
Review Results
4
Download

Alternative Styles

Minimal Dots

With Progress Bar

1
2
3
4
5

Outlined Steps

1
Step 1
2
Step 2
3
Step 3

Icons Instead of Numbers

Profile
Settings
Complete

Interactive Features

Clickable Steps

1
Completed
Click to revisit
2
Current
You are here
3
Locked
Complete previous

Loading State

1
Uploaded
Processing...
3
Complete

Class API Reference

Type Class Usage Notes
Base steps The outer container Always required
step An individual step Direct child of steps
indicator The circle with number/icon Holds number and/or icon
content Step label + description block Holds title and description
connector Line linking adjacent steps Place inside each step except the last
number / title / description Inner text pieces Styled by the parent step state
Sizes xs Tiny — 24px indicator Modifier on steps
sm Small — 32px indicator Modifier on steps
(default) Medium — 40px indicator No size class needed
xl Large — 48px indicator Modifier on steps
lg Big — 56px indicator Modifier on steps
Intents primary Blue active/completed colors Modifier on steps
positive Green active/completed colors Modifier on steps
negative Red active/completed colors Modifier on steps
warning Yellow active/completed colors Modifier on steps
info Lighter-blue colors Modifier on steps
purple / pink / orange Extended palette colors Modifier on steps
States active The current step Modifier on step
completed Finished step — shows check icon Modifier on step
disabled Locked step — not interactive Modifier on step
Layout horizontal Steps flow left to right Default orientation
vertical Steps flow top to bottom Modifier on steps
sidebar Vertical nav + side content area Add a sidebar-nav and sidebar-content inside
compact Hides descriptions, tightens spacing For vertical variants
Variants minimal Dot-only style Modifier on steps
progress-bar Progress bar with milestone markers Add a progress-track + progress-fill inside
outline Indicator stays white-filled with colored border Modifier on steps
icons Show icons instead of numbers Provide an icon child in each indicator
clickable Hover indicates clickable steps Modifier on steps