Incident Timeline
Incident detail card with a resolved header, a four-phase chronological update rail, and a postmortem link at the foot.
Incident detail card with a resolved header, a four-phase chronological update rail, and a postmortem link at the foot.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Incident Timeline is the detail view for a resolved incident: a header card shows INC-2026-0041, Elevated error rates on the API, started Jun 12 14:02 and resolved 16:47 (2h 45m), then four updates on a left vertical rail: Investigating, Identified, Monitoring, Resolved, each with its timestamp and a plain paragraph of what engineers knew at that moment. A postmortem card sits at the foot with a Read postmortem link.
Updates are a typed const array with an UpdatePhase union steering both the dot opacity and the Badge variant. The rail is a positioned div, no SVG, no library.
Reach for this block on the incident detail page of a status site, linked from each incident row in the incident history list. Wire the updates array to your incident log and the postmortem link to your docs host.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the resolved incident detail. Other timeline shapes:
Tip: the body copy at each phase is the real work, writing what you knew and when is what turns an incident into a trust-building document.