Timeline
Events in order along a vertical line, such as an activity feed or order history.Basic
Preview
Code
Assessment publishedSep 24
Shared on the website and with the cluster leads.Data cleanedSep 18
Duplicates removed and place codes matched.Survey closedSep 10
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/datanpm
npm install @advui/dataUsage
import { Timeline } from '@advui/data'
<Timeline>
<Timeline.Item title="Published" time="Sep 24" description="Shared with partners." />
<Timeline.Item title="Survey closed" time="Sep 10" />
</Timeline>Examples
Icons and tones
The current event carries `aria-current="step"`.Preview
Code
Order placedMon, 09:12
Payment confirmed.PackedMon, 15:40
Delivery failedTue, 11:05
No one was at the address. We will try again tomorrow.Out for deliveryWed, 08:30
Activity feed
Items can hold any content.Preview
Code
Nwe Ni commented2 hours ago
The township totals now match the baseline tables.
Aung Kyaw assigned the reviewYesterday
Hla Min
Report createdSep 20
API reference
Timeline
The list of events, newest or oldest first.Timeline.Item
| Prop | Type | Default | Description |
|---|---|---|---|
title required | ReactNode | — | What happened. |
time | ReactNode | — | When it happened, already formatted. |
description | ReactNode | — | Details under the title. |
icon | ReactNode | — | Icon in the marker. Without one, the marker is a dot. |
tone | 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'default' | Color of the marker. |
children | ReactNode | — | Extra content under the description. |
Accessibility
- The timeline has the
listrole and each eventlistitem, so screen readers announce how many there are. - Markers and the line are decorative and hidden. Tone is only color, so say what happened in the title ("Delivery failed").
- Mark the current event with
aria-current="step"on web.
Platform notes
iOS
aria-current has no VoiceOver equivalent; put the state in the title if it matters.Android
Same as iOS.