Timeline
React vertical timeline for order history, request tracking, and activity feeds, with status markers, icons, and avatars. Ordered list semantics.
Compose TimelineItems, each with a marker and content. The marker status is visual only, so keep the meaning in the text.
When to use
Use Timeline to show the history of a request: submitted, under review, approved, delivered. Use the marker status for a quick visual read and put the date and outcome in the text.
For upcoming steps in a form, use ProgressIndicator.
Examples
Props
Props declared by Timeline. Native attributes of the underlying element pass through.
<Timeline>
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | ||
orientation | "vertical" | "horizontal" |
<TimelineMarker>
| Prop | Type | Default | Description |
|---|---|---|---|
status | "default" | "error" | "success" | "warning" | "info" |
Accessibility
Timeline renders an ordered list, so the number and order of events are announced. Marker status and icons are decorative, so each item's text must state what happened and when.
Keep the newest or oldest first consistently across the product.