semi-design/content/show/timeline/index-en-US.md

---

localeCode: en-US order: 58 category: Show title: Timeline subTitle: Timeline icon: doc-timeline

brief: Timeline component is used to display a series of information vertically.

Demos

How to import

import { Timeline } from '@douyinfe/semi-ui';

Basic Usage

import React from 'react';
import { Timeline } from '@douyinfe/semi-ui';

() => (
    <Timeline>
        <Timeline.Item time='2019-07-14 10:35'>First Node Content</Timeline.Item>
        <Timeline.Item time='2019-06-13 16:17'>Second Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-14 18:34'>Third Node Content</Timeline.Item>
    </Timeline>
)

Type

You can use type to set the type of a time node, using one of: default,ongoing, success, warning, Error. The corresponding dot will have a corresponding color.

import React from 'react';
import { Timeline } from '@douyinfe/semi-ui';

() => (
    <Timeline>
        <Timeline.Item time='2019-07-14 10:35' type='ongoing'>Processing</Timeline.Item>
        <Timeline.Item time='2019-06-13 16:17' type='success'>Succeed</Timeline.Item>
        <Timeline.Item time='2019-05-14 18:34' type='error'>Failed</Timeline.Item>
    </Timeline>
)

Custom node

You can use dot to customize icon, color to customize color or pass in children with style.

import React from 'react';
import { Timeline } from '@douyinfe/semi-ui';
import { IconAlertTriangle } from '@douyinfe/semi-icons';

() => (
    <Timeline>
        <Timeline.Item time='2019-07-14 10:35'>Default Style</Timeline.Item>
        <Timeline.Item time='2019-06-13 16:17' dot={(<IconAlertTriangle />)} type='warning'>Customized Icon</Timeline.Item>
        <Timeline.Item time='2019-05-14 18:34' color='pink'>Customized Color</Timeline.Item>
        <Timeline.Item time='2019-04-10 12:20'><span style={{fontSize: '18px'}}>Customized Node Style</span></Timeline.Item>
    </Timeline>
)

Timeline Position

Use mode to set the position of the timeline, using one of: left, center, alternate, right.

Left (default)

import React from 'react';
import { Timeline } from '@douyinfe/semi-ui';

() => (
    <Timeline mode='left'>
        <Timeline.Item time='2019-07-14 10:35' extra='Extra Information'>First Node Content</Timeline.Item>
        <Timeline.Item time='2019-06-13 16:17' extra='Extra Information'>Second Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-14 18:34' extra='Extra Information'>Third Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-09 09:12' extra='Extra Information'>Forth Node Content</Timeline.Item>
    </Timeline>
)

Center

import React from 'react';
import { Timeline } from '@douyinfe/semi-ui';

() => (
    <Timeline mode='center'>
        <Timeline.Item time='2019-07-14 10:35' extra='Extra Information'>First Node Content</Timeline.Item>
        <Timeline.Item time='2019-06-13 16:17' extra='Extra Information'>Second Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-14 18:34' extra='Extra Information'>Third Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-09 09:12' extra='Extra Information'>Forth Node Content</Timeline.Item>
    </Timeline>
)

Alternate

import React from 'react';
import { Timeline } from '@douyinfe/semi-ui';

() => (
    <Timeline mode='alternate'>
        <Timeline.Item time='2019-07-14 10:35' extra='Extra Information'>First Node Content</Timeline.Item>
        <Timeline.Item time='2019-06-13 16:17' extra='Extra Information'>Second Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-14 18:34' extra='Extra Information'>Third Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-09 09:12' extra='Extra Information'>Forth Node Content</Timeline.Item>
    </Timeline>
)

Right

import React from 'react';
import { Timeline } from '@douyinfe/semi-ui';

() => (
    <Timeline mode='right'>
        <Timeline.Item time='2019-07-14 10:35' extra='Extra Information'>First Node Content</Timeline.Item>
        <Timeline.Item time='2019-06-13 16:17' extra='Extra Information'>Second Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-14 18:34' extra='Extra Information'>Third Node Content</Timeline.Item>
        <Timeline.Item time='2019-05-09 09:12' extra='Extra Information'>Forth Node Content</Timeline.Item>
    </Timeline>
)

DataSource

import React from 'react';
import { Timeline } from '@douyinfe/semi-ui';
import { IconAlertTriangle } from '@douyinfe/semi-icons';

() => (
    <Timeline 
        mode='alternate' 
        dataSource={[
            {
                time:'2019-07-14 10:35',
                extra:'Extra Information',
                content:'First Node Content',
                type:'ongoing',
            },
            {
                time:'2019-06-13 16:17',
                extra:'Extra Information',
                content:<span style={{fontSize: '18px'}}>Second Node Content</span>,
                color:'pink',
            },
            {
                time:'2019-05-14 18:34',
                extra:'Extra Information',
                dot:<IconAlertTriangle />,
                content:'Third Node Content',
                type:'warning',
            },
            {
                time:'2019-05-09 09:12',
                extra:'Extra Information',
                content:'Forth Node Content',
                type:'success',
            }    
        ]} 
    />
)

API reference

TimeLine

Properties	Instruction	type	Default
className	Class name	string	-
mode	The relative Position of the timeline and content	left|right|center|alternate	left
style	Inline style	CSSProperties	-
dataSource	DataSource array for Timeline v>=1.16.0, Support content attribute and all attributes of TimeLine.Item	array	-

TimeLine.Item

Properties	Instruction	type	Default
className	Class name	string	-
color	Color of dot	string	-
dot	Custom dot	React Node	-
extra	Custom extra content	React Node	-
position	Custom node location to override TimeLine's mode setting	left|right	-
style	Inline style	CSSProperties	-
time	Time value	string	-
type	Pattern of dot	default|ongoing|success|warning|error	default

Design Tokens