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

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

### Basic Usage

```jsx live=true
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.

```jsx live=true
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.

```jsx live=true
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)

```jsx live=true
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

```jsx live=true
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

```jsx live=true
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

```jsx live=true
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

```jsx live=true
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
<DesignToken/>