logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.26.3
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • 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
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0
When To Use
Examples
Basic
Color
Last node and Reversing
Alternate
Custom
Right alternate
Label
API
Timeline
Items
Design Token

Timeline

Vertical display timeline.
Importimport { Timeline } from "antd";
Sourcecomponents/timeline
Docs
Edit this pageChangelog
contributors
    • TagTooltip

    Resources

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

    Community

    Awesome Ant Design
    Medium
    X
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    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.
    Upgrade Tip

    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.

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

    API

    Common props ref：Common props

    Timeline

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

    Component TokenHow to use?
    Token NameDescriptionTypeDefault Value
    dotBgBackground color of nodestring#ffffff
    dotBorderWidthBorder width of nodestring | number2
    itemPaddingBottomBottom padding of itemnumber20
    tailColorLine colorstringrgba(5,5,5,0.06)
    tailWidthLine widthstring | number2
    Global TokenHow to use?
    Basic

    Basic timeline.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    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.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    Custom

    Set a node as an icon or other custom element.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    Label

    Use label show time alone.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    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.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    Alternate

    Alternate timeline.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    Right alternate

    Right alternate timeline.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    1. Create a services site 2015-09-01
    2. Solve initial network problems 2015-09-01
    3. Technical testing 2015-09-01
    4. Network problems being solved 2015-09-01
    1. Create a services site 2015-09-01
    2. Solve initial network problems 2015-09-01
    3. Technical testing 2015-09-01
    4. Recording...
    1. Create a services site 2015-09-01
    2. Solve initial network problems 2015-09-01
    3. Technical testing 2015-09-01
    4. Network problems being solved 2015-09-01
    1. 2015-09-01
      Create a services
    2. 2015-09-01 09:12:11
      Solve initial network problems
    3. Technical testing
    4. 2015-09-01 09:12:11
      Network problems being solved
    1. Create a services site 2015-09-01
    2. Create a services site 2015-09-01

    3. Solve initial network problems 1

      Solve initial network problems 2

      Solve initial network problems 3 2015-09-01

    4. Technical testing 1

      Technical testing 2

      Technical testing 3 2015-09-01

    5. Technical testing 1

      Technical testing 2

      Technical testing 3 2015-09-01

    6. Technical testing 1

      Technical testing 2

      Technical testing 3 2015-09-01

    7. Custom color testing

    1. Create a services site 2015-09-01
    2. Solve initial network problems 2015-09-01
    3. 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.
    4. Network problems being solved 2015-09-01
    5. Create a services site 2015-09-01
    6. Technical testing 2015-09-01
    1. Create a services site 2015-09-01
    2. Solve initial network problems 2015-09-01
    3. Technical testing 2015-09-01
    4. Network problems being solved 2015-09-01