Timeline

A vertical list of events on a rail.

Overview

A history of what happened and when: status changes, a record's activity.

Events

Do
  1. accepted12 Oct 2026, 09:14
    Client confirmed by phone.
  2. sent10 Oct 2026, 16:02
import { Pill, Timeline, TimelineItem } from "@hackcove/ui";

<Timeline label="Status history">
  <TimelineItem
    tone="positive"
    title={<Pill tone="emerald">accepted</Pill>}
    time="12 Oct 2026, 09:14"
  >
    Client confirmed by phone.
  </TimelineItem>
  <TimelineItem title={<Pill tone="amber">sent</Pill>} time="10 Oct 2026, 16:02" />
</Timeline>
A title (a Pill or a short label), the time already formatted for the reader, and a note under them.
Don't
  1. accepted2026-10-12T09:14:00.000Z
    Client confirmed by phone.
  2. sent2026-10-10T16:02:00.000Z
import { Timeline, TimelineItem } from "@hackcove/ui";

<Timeline label="Status history">
  <TimelineItem title="accepted" time="2026-10-12T09:14:00.000Z">
    Client confirmed by phone.
  </TimelineItem>
  <TimelineItem title="sent" time="2026-10-10T16:02:00.000Z" />
</Timeline>
time is drawn as given: a raw ISO string reads as machine output. Format it before it gets here.

No events

Do
No history yet.
import { Timeline } from "@hackcove/ui";

<Timeline label="Status history" empty="No history yet." />
With no items, empty is drawn in place of the list.

Usage

  • Name the list with label, and order the TimelineItems yourself, newest or oldest first.
  • A TimelineItem has a title (a Pill or a short label), a time you have already formatted for the reader, and an optional note as its children.
  • tone colours the marker dot with the Callout's set (neutral, info, positive, warn, danger); neutral is a plain ring.
  • Give the Timeline an empty to draw when there are no items; without one it draws nothing.
  • Numbered instructions are Steps, not a Timeline.

Accessibility

  • Timeline is an <ol> named by label (aria-label), and each TimelineItem is an <li>.
  • The marker dot is aria-hidden, so tone is colour only: say the outcome in the title.
  • time is plain text, as you formatted it.

API

Timeline

A vertical list of events, newest or oldest first as the caller orders them. A named <ol> of TimelineItems on a rail; with no children it draws empty instead of an empty list.

empty

Drawn in place of the list when there are no items.

Type
ReactNode
label required

Names the list (aria-label), e.g. "Status history".

Type
string

TimelineItem

One event: a title (a Pill, a heading), a time the app has already formatted, and the children as a note under them. tone colours the marker dot with the Callout's set.

time
Type
ReactNode
title required
Type
ReactNode
tone

The marker dot's colour. Defaults to neutral, a plain ring.

Type
"positive" | "danger" | "neutral" | "info" | "warn"
Default
neutral