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.
Moved to GitHub Pages
Two new games
Kern Me and Tab OrderThirteen Figma plugins
Lemon Squeezy approval
In progress
A pending last entry for what is still happening.
- 09:02
Build passed
- 09:05
252 browser checks passed
- 09:06
Waiting for approval
Ana is reviewing Deploying to production…
Props
Timeline props
Events in order: a changelog, an order's progress, an activity feed (Ant's Timeline).
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | TimelineItem[] | - | The entries: id, title, optional time, dateTime, description, tone, icon. |
className | string | - | Extra class names for the root element. |
pending | ReactNode | - | 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.