Ant Design

⌘ K

6.4.3

Timeline

Vertical display timeline.

Importimport { Timeline } from 'antd';

GitHub

components/timeline Issue Open issues

Docs

Edit this page LLMs.md

contributors

Tag Tooltip

Ant Design

⌘ K

6.4.3

Timeline

Vertical display timeline.

Importimport { Timeline } from 'antd';

GitHub

components/timeline Issue Open issues

Docs

Edit this page LLMs.md

contributors

Tag Tooltip

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.

Examples

API

Common props ref：Common props

Timeline

Property	Description	Type	Default
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
items	Each node of timeline	Items[]	-
mode	By sending `alternate` the timeline will distribute the nodes to the left and right	`start` \| `alternate` \| `end`	`start`
orientation	Set the direction of the timeline	`vertical` \| `horizontal`	`vertical`
~~pending~~	Set the last ghost node's existence or its content. Use `item.loading` instead	ReactNode	false
~~pendingDot~~	Set the dot of the last ghost node when pending is true. Use `item.icon` instead	ReactNode	<LoadingOutlined />
reverse	Whether reverse nodes or not	boolean	false
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
titleSpan	Set the title span space. It is the distance to the center of the dot	number \| string	12
variant	Config style variant	`filled` \| `outlined`	`outlined`

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
content	Set the content	ReactNode	-
~~children~~	Set the content. Please use `content` instead	ReactNode	-
~~dot~~	Customize timeline dot. Please use `icon` instead	ReactNode	-
icon	Customize node icon	ReactNode	-
~~label~~	Set the label. Please use `title` instead	ReactNode	-
loading	Set loading state	boolean	false
placement	Customize node placement	`start` \| `end`	-
~~position~~	Customize node position. Please use `placement` instead	`start` \| `end`	-
title	Set the title	ReactNode	-

Semantic DOM

Timeline

Timeline Items

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
dotBg	Background color of node	string
dotBorderWidth	Border width of node	string \| number	2
dotSize	Node size	string \| number
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?

Token Name	Description	Type	Default Value
colorError	Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.	string	#ff4d4f
colorPrimary	Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.	string	#1677ff
colorSuccess	Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens.	string	#52c41a
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string	rgba(0,0,0,0.88)
colorTextDisabled	Control the color of text in disabled state.	string	rgba(0,0,0,0.25)
fontFamily	The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number	14
lineHeight	Line height of text.	number	1.5714285714285714
margin	Control the margin of an element, with a medium size.	number	16
paddingXS	Control the extra small padding of the element.	number	8
paddingXXS	Control the extra extra small padding of the element.	number	4

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.

Examples

Basic

Basic timeline.

Loading and Reversing

Node supports loading to indicate loading, and reverse property to control the order of nodes.

Horizontal

Horizontal layout.

End alternate

End alternate timeline.

Title Offset

Use titleSpan to set the title span space.

Custom semantic dom styling

You can customize the semantic dom style of Timeline by passing objects/functions through classNames and styles.

6.0.0

Variant

Use the variant to set the style of the timeline.

Alternate

Alternate timeline.

Custom

Set a node as an icon or other custom element.

Title

Use title show time alone.

Semantic Sample

Achieve richer custom styles by using semantic structure.

API

Common props ref：Common props

Timeline

Property	Description	Type	Default
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
items	Each node of timeline	Items[]	-
mode	By sending `alternate` the timeline will distribute the nodes to the left and right	`start` \| `alternate` \| `end`	`start`
orientation	Set the direction of the timeline	`vertical` \| `horizontal`	`vertical`
~~pending~~	Set the last ghost node's existence or its content. Use `item.loading` instead	ReactNode	false
~~pendingDot~~	Set the dot of the last ghost node when pending is true. Use `item.icon` instead	ReactNode	<LoadingOutlined />
reverse	Whether reverse nodes or not	boolean	false
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
titleSpan	Set the title span space. It is the distance to the center of the dot	number \| string	12
variant	Config style variant	`filled` \| `outlined`	`outlined`

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
content	Set the content	ReactNode	-
~~children~~	Set the content. Please use `content` instead	ReactNode	-
~~dot~~	Customize timeline dot. Please use `icon` instead	ReactNode	-
icon	Customize node icon	ReactNode	-
~~label~~	Set the label. Please use `title` instead	ReactNode	-
loading	Set loading state	boolean	false
placement	Customize node placement	`start` \| `end`	-
~~position~~	Customize node position. Please use `placement` instead	`start` \| `end`	-
title	Set the title	ReactNode	-

Semantic DOM

Timeline

Timeline Items

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
dotBg	Background color of node	string
dotBorderWidth	Border width of node	string \| number	2
dotSize	Node size	string \| number
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?

Token Name	Description	Type	Default Value
colorError	Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.	string	#ff4d4f
colorPrimary	Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.	string	#1677ff
colorSuccess	Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens.	string	#52c41a
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string	rgba(0,0,0,0.88)
colorTextDisabled	Control the color of text in disabled state.	string	rgba(0,0,0,0.25)
fontFamily	The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number	14
lineHeight	Line height of text.	number	1.5714285714285714
margin	Control the margin of an element, with a medium size.	number	16
paddingXS	Control the extra small padding of the element.	number	8
paddingXXS	Control the extra extra small padding of the element.	number	4

Basic

Basic timeline.

Loading and Reversing

Node supports loading to indicate loading, and reverse property to control the order of nodes.

Horizontal

Horizontal layout.

End alternate

End alternate timeline.

Title Offset

Use titleSpan to set the title span space.

Custom semantic dom styling

You can customize the semantic dom style of Timeline by passing objects/functions through classNames and styles.

6.0.0

Variant

Use the variant to set the style of the timeline.

Alternate

Alternate timeline.

Custom

Set a node as an icon or other custom element.

Title

Use title show time alone.

Semantic Sample

Achieve richer custom styles by using semantic structure.

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

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

Init
Start
Pending
Complete

Init
Start
Pending
Complete

Init
Start
Pending
Complete

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

titleSpan = 100px

05:10
Create a services
09:03
Solve initial network problems
Technical testing
11:28
Network problems being solved

titleSpan = 25%

05:10
Create a services
09:03
Solve initial network problems
Technical testing
11:28
Network problems being solved

titleSpan = 18, mode = end

05:10
Create a services
09:03
Solve initial network problems
Technical testing
11:28
Network problems being solved

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

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

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

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

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

StartEndAlternate

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

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

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

root
Root element with timeline container list style reset, vertical layout, dot icon, outlined style, alternate layout and other basic container styles
item
Item element with single timeline node relative positioning, margin, padding, font size, finish state, color theme, layout direction and other node basic styles
itemWrapper
Item wrapper element with timeline node content wrapping container styles
itemIcon
Item icon element with node head icon absolute positioning, width/height size, background color, border, border radius, wave animation and other icon styles
itemSection
Item section element with section container containing header and content flex layout, wrap, gap and other layout styles
itemHeader
Item header element with header area layout containing title and rail, alignment, text direction and other styles
itemTitle
Item title element with node title text font size, line height, color and other text styles
itemContent
Item content element with node detail content relative positioning, top offset, left margin, text color, word break and other content styles
itemRail
Item rail element with timeline node connection track line absolute positioning, top offset, left offset, height, border color, width, style and other connection line styles

2015-09-01 09:12:11
Solve initial network problems
2015-09-01 11:11:11
Technical testing

root
Root element
wrapper
Item wrapper element
icon
Item icon element
section
Item section element
header
Item header element
title
Item title element
content
Item content element
rail
Item rail element

Timeline

Timeline

When To Use

Examples

API

Timeline

Items

Semantic DOM

Timeline

Timeline Items

Design Token

When To Use

Examples

API

Timeline

Items

Semantic DOM

Timeline

Timeline Items

Design Token

titleSpan = 100px

titleSpan = 25%

titleSpan = 18, mode = end

root

item

itemWrapper

itemIcon

itemSection

itemHeader

itemTitle

itemContent

itemRail

root

wrapper

icon

section

header

title

content

rail