Skip to content
Alea0.1

Data display

Timeline

Events in order: a changelog, an order's progress, an activity feed.

Ant Design: Timeline

import { Timeline } from '@alea/ui';

Examples

Timeline

Tones, times and a pending last step.

  1. Moved to GitHub Pages

  2. Two new games

    Kern Me and Tab Order
  3. Thirteen Figma plugins

  4. Lemon Squeezy approval

In progress

A pending last entry for what is still happening.

  1. 09:02

    Build passed

  2. 09:05

    252 browser checks passed

  3. 09:06

    Waiting for approval

    Ana is reviewing
  4. Deploying to production…

Props

Timeline props

Events in order: a changelog, an order's progress, an activity feed (Ant's Timeline).

PropTypeDefaultDescription
itemsrequiredTimelineItem[]-The entries: id, title, optional time, dateTime, description, tone, icon.
classNamestring-Extra class names for the root element.
pendingReactNode-Newest first or oldest first is up to you; this only marks the last item as pending.

Accessibility

  • An ordered list; pass dateTime to make times machine-readable.

Do and don't

Do

  • Put the newest first for activity, the oldest first for history.
  • Use tone only for meaning: success, warning, danger.

Don't

  • Don't use it for steps the person still has to do: use Steps.
  • Don't show more than about ten entries without a Show more.
Tested with axe, keyboard and screen reader roles