Timeline

Vertical display timeline.

Importimport{ Timeline }from"antd";

Docs

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.

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

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Network problems being solved 2015-09-01

Basic

Basic timeline.

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Recording...

Last node and Reversing

When the timeline is incomplete and ongoing, put a ghost node at last. Set pending as truthy value to enable displaying pending item. You can customize the pending content by passing a React Element. Meanwhile, pendingDot={a React Element} is used to customize the dot of the pending item. reverse={true} is used for reversing nodes.

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Network problems being solved 2015-09-01

Custom

Set a node as an icon or other custom element.

LeftRightAlternate

2015-09-01
Create a services
2015-09-01 09:12:11
Solve initial network problems
Technical testing
2015-09-01 09:12:11
Network problems being solved

Label

Use label show time alone.

Create a services site 2015-09-01
Create a services site 2015-09-01
Solve initial network problems 1
Solve initial network problems 2
Solve initial network problems 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Technical testing 1
Technical testing 2
Technical testing 3 2015-09-01
Custom color testing

Color

Set the color of circles. green means completed or success status, red means warning or error, and blue means ongoing or other default status, gray for unfinished or disabled status.

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Network problems being solved 2015-09-01
Create a services site 2015-09-01
Technical testing 2015-09-01

Alternate

Alternate timeline.

Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Network problems being solved 2015-09-01

Right alternate

Right alternate timeline.

API

Common props ref：Common props

Timeline

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

Ant Design

Timeline

When To Use

Examples

API

Timeline

Items

Design Token

Component TokenHow to use?

Global TokenHow to use?