Timeline
You might say
Show the shipping updates in time order so people can tell where the package is.
Show a sequence of events in time orderA timeline works for shipping, approval records, and release history. Choose whether the newest event appears first or last and stay consistent. Dates, labels, and status text carry the meaning; dots and colors only help people scan.
When to use it
- Shipping progress
- Approval history
- Release notes
- A record of events over time
When NOT to use it
- Use a timeline for items with no meaningful order1Enter information2Confirm order3Complete payment
- Switch time direction halfway through
- Rely on dot color without status text
- Pack long, unrelated documents into each event
Anatomy
Package has been signed for07-20 14:32
The axis and container for a list of events
Use markers to show position and status; explain the outcome with text or icons
What happened at this step
Include the time to the minute when it matters
Variants
Vertical
Shipping07-19 09:15
Order placed07-18 20:02
Use the vertical layout when there are many events
Status
Deployed successfully
Building...
Test failed
Use text to describe outcomes and color only as a supporting cue
Horizontal
Project approval03-01
Design04-10
DevelopmentIn progress
LaunchTo be determined
When there are few steps and enough room to show progress horizontally
Typical use cases
Order tracking
Waybill SF1024888In transit
In transit · Shenzhen Nanshan Transfer CenterToday 09:15
Accepted · Hangzhou Yuhang outletYesterday 20:02
Order placedYesterday 18:40
Approval record
Leave approval · 3 days annual leaveApproved
maya-lee approved07-21 10:24 · Agree
Amai approved07-20 16:08 · AgreeAlex Chen submitted an application07-20 09:30
Project history
Update log
v2.4.0 Latest2026-07-18 · Added dark mode, component search
v2.3.22026-06-30 · Fix 12 known issues
v2.3.02026-06-12 · Team collaboration function launched
Release log
Website Refresh · MilestonesIn development
Kickoff
03-01
Design
04-10
Development
In progress
Launch
TBD