logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.5.1
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
When To Use
Examples
Basic
Color
Last node and Reversing
Alternate
Custom
Right alternate
Label
API
Timeline
Items
Design Token

Timeline

TagTooltip

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuqueAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTechMore Products

yuqueYuQue-Document Collaboration Platform
AntVAntV-Data Visualization
EggEgg-Enterprise Node.js Framework
kitchenKitchen-Sketch Toolkit
xtechAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

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.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Timeline } from 'antd';

const App: React.FC = () => (
  <Timeline
    items={[
      {
        children: 'Create a services site 2015-09-01',
      },
      {
        children: 'Solve initial network problems 2015-09-01',
      },
      {
        children: 'Technical testing 2015-09-01',
      },
      {
        children: 'Network problems being solved 2015-09-01',
      },
    ]}
  />
);

export default App;
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.

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import { Button, Timeline } from 'antd';

const App: React.FC = () => {
  const [reverse, setReverse] = useState(false);

  const handleClick = () => {
    setReverse(!reverse);
  };

  return (
    <div>
      <Timeline
        pending="Recording..."
        reverse={reverse}
        items={[
          {
            children: 'Create a services site 2015-09-01',
          },
          {
            children: 'Solve initial network problems 2015-09-01',
          },
          {
            children: 'Technical testing 2015-09-01',
          },
        ]}
      />
      <Button type="primary" style={{ marginTop: 16 }} onClick={handleClick}>
        Toggle Reverse
      </Button>
    </div>
  );
};

export default App;
Custom

Set a node as an icon or other custom element.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { ClockCircleOutlined } from '@ant-design/icons';
import { Timeline } from 'antd';

const App: React.FC = () => (
  <Timeline
    items={[
      {
        children: 'Create a services site 2015-09-01',
      },
      {
        children: 'Solve initial network problems 2015-09-01',
      },
      {
        dot: <ClockCircleOutlined className="timeline-clock-icon" />,
        color: 'red',
        children: 'Technical testing 2015-09-01',
      },
      {
        children: 'Network problems being solved 2015-09-01',
      },
    ]}
  />
);

export default App;
.timeline-clock-icon {
  font-size: 16px;
}
Label

Use label show time alone.

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import type { RadioChangeEvent } from 'antd';
import { Radio, Timeline } from 'antd';

const App: React.FC = () => {
  const [mode, setMode] = useState<'left' | 'alternate' | 'right'>('left');

  const onChange = (e: RadioChangeEvent) => {
    setMode(e.target.value);
  };

  return (
    <>
      <Radio.Group
        onChange={onChange}
        value={mode}
        style={{
          marginBottom: 20,
        }}
      >
        <Radio value="left">Left</Radio>
        <Radio value="right">Right</Radio>
        <Radio value="alternate">Alternate</Radio>
      </Radio.Group>
      <Timeline
        mode={mode}
        items={[
          {
            label: '2015-09-01',
            children: 'Create a services',
          },
          {
            label: '2015-09-01 09:12:11',
            children: 'Solve initial network problems',
          },
          {
            children: 'Technical testing',
          },
          {
            label: '2015-09-01 09:12:11',
            children: 'Network problems being solved',
          },
        ]}
      />
    </>
  );
};

export default App;
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.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { SmileOutlined } from '@ant-design/icons';
import { Timeline } from 'antd';

const App: React.FC = () => (
  <Timeline
    items={[
      {
        color: 'green',
        children: 'Create a services site 2015-09-01',
      },
      {
        color: 'green',
        children: 'Create a services site 2015-09-01',
      },
      {
        color: 'red',
        children: (
          <>
            <p>Solve initial network problems 1</p>
            <p>Solve initial network problems 2</p>
            <p>Solve initial network problems 3 2015-09-01</p>
          </>
        ),
      },
      {
        children: (
          <>
            <p>Technical testing 1</p>
            <p>Technical testing 2</p>
            <p>Technical testing 3 2015-09-01</p>
          </>
        ),
      },
      {
        color: 'gray',
        children: (
          <>
            <p>Technical testing 1</p>
            <p>Technical testing 2</p>
            <p>Technical testing 3 2015-09-01</p>
          </>
        ),
      },
      {
        color: 'gray',
        children: (
          <>
            <p>Technical testing 1</p>
            <p>Technical testing 2</p>
            <p>Technical testing 3 2015-09-01</p>
          </>
        ),
      },
      {
        color: '#00CCFF',
        dot: <SmileOutlined />,
        children: <p>Custom color testing</p>,
      },
    ]}
  />
);

export default App;
Alternate

Alternate timeline.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { ClockCircleOutlined } from '@ant-design/icons';
import { Timeline } from 'antd';

const App: React.FC = () => (
  <Timeline
    mode="alternate"
    items={[
      {
        children: 'Create a services site 2015-09-01',
      },
      {
        children: 'Solve initial network problems 2015-09-01',
        color: 'green',
      },
      {
        dot: <ClockCircleOutlined style={{ fontSize: '16px' }} />,
        children: `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.`,
      },
      {
        color: 'red',
        children: 'Network problems being solved 2015-09-01',
      },
      {
        children: 'Create a services site 2015-09-01',
      },
      {
        dot: <ClockCircleOutlined style={{ fontSize: '16px' }} />,
        children: 'Technical testing 2015-09-01',
      },
    ]}
  />
);

export default App;
Right alternate

Right alternate timeline.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { ClockCircleOutlined } from '@ant-design/icons';
import { Timeline } from 'antd';

const App: React.FC = () => (
  <Timeline
    mode="right"
    items={[
      {
        children: 'Create a services site 2015-09-01',
      },
      {
        children: 'Solve initial network problems 2015-09-01',
      },
      {
        dot: <ClockCircleOutlined style={{ fontSize: '16px' }} />,
        color: 'red',
        children: 'Technical testing 2015-09-01',
      },
      {
        children: 'Network problems being solved 2015-09-01',
      },
    ]}
  />
);

export default App;

API

Timeline

PropertyDescriptionTypeDefault
modeBy sending alternate the timeline will distribute the nodes to the left and rightleft | alternate | right-
pendingSet the last ghost node's existence or its contentboolean | ReactNodefalse
pendingDotSet the dot of the last ghost node when pending is trueReactNode<LoadingOutlined />
reverseWhether reverse nodes or notbooleanfalse
itemsEach node of timelineItems[]5.2.0

Items

Node of timeline.

PropertyDescriptionTypeDefault
colorSet the circle's color to blue, red, green, gray or other custom colorsstringblue
dotCustomize timeline dotReactNode-
labelSet the labelReactNode-
childrenSet the contentReactNode-
positionCustomize node positionleft | right-

Design Token

Global Token

Token NameDescriptionTypeDefault Value
colorBgContainerContainer background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.string#ffffff
colorErrorUsed to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.string#ff4d4f
colorPrimaryBrand 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
colorSplitUsed as the color of separator, this color is the same as colorBorderSecondary but with transparency.stringrgba(5, 5, 5, 0.06)
colorSuccessUsed to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens.string#52c41a
colorTextDefault text color which comply with W3C standards, and this color is also the darkest neutral color.stringrgba(0, 0, 0, 0.88)
colorTextDisabledControl the color of text in disabled state.stringrgba(0, 0, 0, 0.25)
controlHeightLGLG component heightnumber40
fontFamilyThe 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'
fontSizeThe most widely used font size in the design system, from which the text gradient will be derived.number14
fontSizeSMSmall font sizenumber12
lineHeightLine height of text.number1.5714285714285714
lineTypeBorder style of base componentsstringsolid
lineWidthBorder width of base componentsnumber1
lineWidthBoldThe default line width of the outline class components, such as Button, Input, Select, etc.number2
marginControl the margin of an element, with a medium size.number16
marginSMControl the margin of an element, with a medium-small size.number12
marginXSControl the margin of an element, with a small size.number8
marginXXSControl the margin of an element, with the smallest size.number4
paddingControl the padding of the element.number16
paddingXXSControl the extra extra small padding of the element.number4
wireframeUsed to change the visual effect of the component to wireframe, if you need to use the V4 effect, you need to enable the configuration itembooleanfalse
  • 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...
  • 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
  • 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
  • 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

  • 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