Components
Steps
Horizontal, vertical, and colorful progress states.
Horizontal
Checkout flow
Simple numbered steps with active color.
1
Shipping
/
2
Billing
/
3
Review
/
4
Payment
/
5
Done
Colorful
App onboarding
Badges with icons and gradients.
Account
Profile
Tour
Launch
Vertical
Implementation steps
Timeline style with statuses.
Set up workspace
Invite team members and assign roles.
Integrate API
Connect data sources and configure webhooks.
QA & launch
Run regression tests and publish.
Badges
Colored statuses
Use pills to highlight current state.
Step 1 ?
Done
Step 2 ? In
progress
Step 3 ? Needs
input
Step 4 ?
Pending
Numbered
Product launch
Compact labels with connector lines.
1
Research
Market insights
2
Design
UI/UX
3
Develop
Sprint 2
4
QA
Testing
5
Security
Audit
6
Beta
Limited rollout
7
Launch
Go live
8
Measure
KPIs