Timeline

A record's activity as an ordered list.

Uptimeopened the incident: api.example.com is down from 3 regions14:02
3 more checks
1. Uptimeretried from Frankfurt14:03
2. Uptimeretried from São Paulo14:03
3. Uptimeretried from Singapore14:04
ASAna Souzaassigned the incident to herself14:05
ASAna Souzacommented14:09
The 13:58 deploy changed the database pool size. Rolling it back.
deploy-botdeployed v4.2.0 to production14:12
Uptimeresolved the incident after 12 minutes14:14

View code

tsx

<Timeline aria-label="Incident activity">
	<Timeline.Event icon={<CircleDotIcon />} tone="danger" actor="Uptime" time="14:02">
		opened the incident: api.example.com is down from 3 regions
	</Timeline.Event>
	<Timeline.More summary="3 more checks">
		<Timeline.Event icon={<RefreshCwIcon />} actor="Uptime" time="14:03">
			retried from Frankfurt
		</Timeline.Event>
		…
	</Timeline.More>
	<Timeline.Event icon={<UserPlusIcon />} avatar={<Avatar size="sm">…</Avatar>} actor="Ana Souza" time="14:05">
		assigned the incident to herself
	</Timeline.Event>
	<Timeline.Event
		icon={<MessageSquareIcon />}
		actor="Ana Souza"
		time="14:09"
		body={<p>The 13:58 deploy changed the pool size. Rolling it back.</p>}
	>
		commented
	</Timeline.Event>
	<Timeline.Event icon={<RocketIcon />} tone="brand" actor="deploy-bot" time="14:12">
		deployed v4.2.0 to production
	</Timeline.Event>
	<Timeline.Event icon={<CircleCheckIcon />} tone="success" actor="Uptime" time="14:14">
		resolved the incident after 12 minutes
	</Timeline.Event>
</Timeline>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Or copy it into your project to edit it:

Terminal

sdxc ui add timeline

Usage

typescript

import { Timeline } from "@sdxc/ui";

Renders the <ol> and its rail. The rail is drawn once, behind every icon from the first to the last, so a folded run keeps the line continuous when it opens; icons sit on the page's background, --ui-timeline-surface, which masks the rail where they meet it.

Composition

The parts the component publishes, each a static property of the host.

Timeline
Timeline.EventRenders one event: its toned icon on the rail, then a single wrapping line of avatar, actor, description and time, then the body card when one is given.
Timeline.MoreRenders a run of events folded behind a <details>: its summary sits on the rail with an ellipsis glyph, and its events open in place, in the same list and on the same rail.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Also accepts everything in TagProps<"ol">.

Timeline.Event

Prop	Type	Required	Description
`icon`	`RemixNode`	Yes	A 16px glyph naming the kind of event, decorative beside the line's words.
`tone`	`"neutral" \| "brand" \| "success" \| "warning" \| "danger"`	No
`avatar`	`RemixNode`	No	A small avatar of the actor, shown before the name.
`actor`	`RemixNode`	No	Who did it, set in bold.
`time`	`RemixNode`	No	When it happened: a `RelativeTime` or plain text.
`body`	`RemixNode`	No	A comment or other body, set as a card under the line.
`children`	`RemixNode`	No	What happened, in muted text after the actor: "resolved the incident".

Also accepts everything in Omit<TagProps<"li">, "children">.

Timeline.More

Prop	Type	Required	Description
`summary`	`RemixNode`	Yes	The disclosure's label, such as "4 more events".
`open`	`boolean`	No	Starts unfolded.
`children`	`RemixNode`	Yes	The folded Timeline.Event items.

Also accepts everything in Omit<TagProps<"li">, "children">.

Types

Name	Values	What it decides
`Tone`	`"neutral" \| "brand" \| "success" \| "warning" \| "danger"`	The semantic role an event's icon is drawn in.