ant-design/components/timeline/index.en-US.md

category	group	title	cover	coverDark	demo
Components	Data Display	Timeline	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FkTySqNt3sYAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yIl9S4hAIBcAAAAAAAAAAAAADrJ8AQ/original	cols 2

Vertical display timeline.

When To Use

• When a series of information needs to be ordered by time (ascending or descending).
• When you need a timeline to make a visual connection.

:::info After version 5.2.0, we provide a simpler usage <Timeline items={[...]} /> with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0. :::

// works when >=5.2.0, recommended ✅
const items = [{ children: 'sample', label: 'sample' }];
return <Timeline items={items} />;

// works when <5.2.0, deprecated when >=5.2.0 🙅🏻‍♀️
return (
  <Timeline onChange={onChange}>
    <Timeline.Item>Sample</Timeline.Item>
  </Timeline>
);

Examples

Basic Color Last node and Reversing Alternate Custom Right alternate Label Wireframe Component Token

API

Common props ref：Common props

Timeline

Property	Description	Type	Default
mode	By sending alternate the timeline will distribute the nodes to the left and right	left | alternate | right	-
pending	Set the last ghost node's existence or its content	ReactNode	false
pendingDot	Set the dot of the last ghost node when pending is true	ReactNode	<LoadingOutlined />
reverse	Whether reverse nodes or not	boolean	false
items	Each node of timeline	Items[]	5.2.0

Items

Node of timeline.

Property	Description	Type	Default
color	Set the circle's color to blue, red, green, gray or other custom colors	string	blue
dot	Customize timeline dot	ReactNode	-
label	Set the label	ReactNode	-
children	Set the content	ReactNode	-
position	Customize node position	left | right	-

Design Token