Timeline
Vertical activity feed with connector line. Use for audit trails, comment threads, status histories. Status colors (info/success/warning/error) drive marker styling.
Audit trail — mixed statuses
Each TimelineItem carries a Status that tints its marker
success / info / warning / error / neutral — pick the one that matches the event.
- Patient record created
MRN 001-4521 added by Dr. Chen.
- Lab results uploaded
3 documents attached. Awaiting review.
- Prescription flagged
Drug interaction warning: ibuprofen + warfarin.
- Sync to insurance failed
Insurance provider returned 503. Will retry in 5 minutes.
- Discharge note saved
Initial draft saved by Nurse Martinez.
<Timeline Size="md">
<TimelineItem Status="success"
Title="Patient record created"
Description="MRN 001-4521 added by Dr. Chen."
Timestamp="May 9, 9:42 AM" />
<TimelineItem Status="warning"
Title="Prescription flagged"
Description="Drug interaction: ibuprofen + warfarin."
Timestamp="May 9, 2:08 PM" />
<TimelineItem Status="error"
Title="Sync to insurance failed"
Description="Provider returned 503. Will retry."
Timestamp="May 9, 4:30 PM" />
</Timeline>Compact — sm size
Tighter spacing for changelogs and feeds
- v1.2.3
Patch release
- v1.2.2
Bug fixes
- v1.2.1
Bug fixes
- v1.2.0
New patient export feature
<Timeline Size="sm">
<TimelineItem Status="neutral" Title="v1.2.3" Description="Patch release" Timestamp="2026-04-22" />
<TimelineItem Status="neutral" Title="v1.2.2" Description="Bug fixes" Timestamp="2026-04-15" />
<TimelineItem Status="success" Title="v1.2.0" Description="Patient export" Timestamp="2026-04-01" />
</Timeline>Rich body — comment thread
Embed any content via the Body slot
Pass children inside <Body> to render comment cards, attachments, or other rich content.
- Aiko Tanaka commented
Reviewed the chart — recommend follow-up in 6 weeks. Labs look stable.
- Status changed to Active
- Ben Carter replied
Agreed. I'll schedule the follow-up.
<Timeline Size="lg">
<TimelineItem Status="info" Title="Aiko Tanaka commented" Timestamp="2 hours ago">
<Body>
<div style="background: var(--bg-secondary); padding: var(--spacing-3); border-radius: var(--radius-md);">
<p>Reviewed the chart — recommend follow-up in 6 weeks.</p>
</div>
</Body>
</TimelineItem>
</Timeline>