Timeline
Shows events in time order, such as a deploy history or an audit log.
Preview
Local preview. It doesn't affect real accounts, environments, or run data.
Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons
- Canary rollout to 25% of productionRunningStarted by the release pipeline
- platform-api 1.42.0 deployed to stagingSucceededby Mina Park, 3 min 12 s
- platform-api 1.41.2 deployed to productionFailedHealth checks timed out on 2 of 6 instances.
- Environment createdCreated
Usage
- Show events in time order, such as a deploy history, an audit log or a job's steps: an ordered list, named with aria-label. Each Item is one event, marked with its tone's icon.
- In an Item, Title says what happened and Time when, in a time element with dateTime; Status names its state in words, in the tone's ink, and Description adds who or how long. Write them in that order, so a screen reader hears what, when and how it ended.
- There is no connecting line: the icon column carries the sequence. current puts the step where a sequence is now on the recessed plane and announces it as the current step.
- Detail holds logs, a diff or a list of changes behind a disclosure; open, it sits on the recessed plane, with its label in line with the title.
- Anything else an event holds, such as the reply a step gave or the tools it ran, takes a line of its own under the parts, across the event and in source order. Wrap it in an element of your own; it needs no part.
- Don't use a timeline for records the reader sorts or filters; use a Table.
- Don't let color or the icon carry the state alone. Write it in Status.
- Don't write relative times alone, such as 5 minutes ago; keep the absolute instant in dateTime and in the text or a title.
Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons
Anatomy
Root(ol) → Item(li: mark + body) → Title, Time(time), Status, Description, Detail(Collapsible), then any other block on a line of its own
Keyboard and accessibility
- The list takes no focus. Tab reaches each Detail's disclosure and the links inside events.
- Enter or Space opens and closes a Detail.
Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.
Example code
Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.
Key API
The table lists the common wrapper's main props. See the package type declarations for the full types.