Timeline

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.

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

Basic timeline.

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.

Custom

Set a node as an icon or other custom element.

Label

Use label show time alone.

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.

Alternate

Alternate timeline.

Right alternate

Right alternate timeline.

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	boolean \| 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 Token

Global Token

// 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.Item>Sample</Timeline.Item>

</Timeline>

);

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	boolean \| 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`	-

Namu Design

Timeline

Namu Design

Timeline

When To Use

Examples

API

Timeline

Items

Design Token

Component Token

Global Token

When To Use

Examples

API

Timeline

Items

Design Token

Component Token

Global Token

TimelineChangelog

TimelineChangelog

When To Use

Examples

API

Timeline

Items

Design Token

Component Token

Global Token

When To Use

Examples

API

Timeline

Items

Design Token

Component Token

Global Token

Timeline

Timeline