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.

Upgrade Tip

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.

jsx

// 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

API

Common props ref：Common props

Property	Description	Type	Default	Version
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

Component TokenHow to use?

Token Name	Description	Type	Default Value
dotBg	Background color of node	string	#ffffff
dotBorderWidth	Border width of node	string \| number	2
itemPaddingBottom	Bottom padding of item	number	20
tailColor	Line color	string	rgba(5,5,5,0.06)
tailWidth	Line width	string \| number	2

Global TokenHow to use?