Azalea

Timeline

What happened, in order.

Why it exists

Root's audit trail, Harvest's activity feed, Hana's wiki history and Grove's page history are the same shape every time — a rail down the left, a dot per event, the actor and the instant on one line and the detail under it. What differed was only which of those parts each one remembered.

  1. Deployment failed
    Health check never passed in 90s; rolled back automatically.
  2. Deploying to production
  3. Approved by budi@example.co.id
  4. Build 4e3e84f pushed to main
    Nothing linked to the one page that creates a company

The rail is drawn by the list

Not by each row — which is what stops it breaking between items or stubbing out past the last one, the two ways a hand-rolled version comes apart when a row grows. Each dot punches a hole in the rail with a ring in the page's own background colour rather than sitting on top of it.

  1. Awaiting approval
    Nobody has looked at this for four hours.
  2. A row with a much longer body
    Long enough to wrap onto a second and then a third line, which is where a rail drawn per-row starts leaving gaps between the items above and below it.
  3. Resolved

In both themes

light

  1. Failed
  2. Succeeded

dark

  1. Failed
  2. Succeeded

Guidance

Use it when

  • An audit trail, a deployment history, the steps of a run.
  • tone so a failure is findable by scanning the left edge — the column people actually scan when looking for where it went wrong.
  • RelativeTime in meta, so the ages agree with every other list in the platform.

Reach for something else when

  • A list with no order. That is DataList, and a timeline implies a chronology it does not have.
  • Hundreds of items. Past a screenful this is a table with a date column.
  • A tone on every row. If everything is coloured, the left edge stops being scannable.

Props

PropTypeDefaultDescription
titleReactNode—The headline: what happened.
metaReactNode—When, and by whom. A RelativeTime and a name belong here.
tone"neutral" | "active" | "good" | "warn" | "bad""neutral"Colours the dot.
markerReactNode—Replaces the dot — a status icon, an avatar.
childrenReactNode—The detail, under the headline.

Accessibility

An ordered list, because a timeline read out of order is not a timeline — and because it gives a screen reader the count up front. “List, 14 items” is the first useful fact about an audit trail. The rail and the dots are drawn in CSS and are not in the accessibility tree at all; the tone is a second signal beside the words, never the only one.