Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Timeline

Version 1.0.1GithubStorybook

A Timeline is a visual representation of events displayed in chronological order.

Installation

Installation page anchor
yarn add @twilio-paste/timeline - or - yarn add @twilio-paste/core
import {Timeline, TimelineItem} from '@twilio-paste/core/timeline';

const TimePickerExample = () => {
  return (
    <Timeline>
      <TimelineItem title="Event title" timestamp="August 24, 2024">
        Event details
      </TimelineItem>

      <TimelineItem title="Event title" timestamp="August 29, 2024">
        Event details
      </TimelineItem>

      <TimelineItem title="Event title" timestamp="August 30, 2024">
        Event details
      </TimelineItem>
    </Timeline>
  );
};

Timeline

Timeline page anchor

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
TIMELINE

title RequiredRequired

Title to display in the timeline item

Type
string

collapsible

If true, the timeline item will be collapsible

Type
boolean

collapsibleHeading

In case of collapsible timeline item and no timestamp, this will be used as the heading

Type
string
Default
undefined

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
TIMELINE_ITEM

icon

Pass a Paste Icon to display in place of dot

Type
FC<PropsWithChildren<GenericIconProps>>

timestamp

Timestamp to display in the timeline item

Type
string

collapsible

If true, the timeline item will be collapsible

Type
boolean

collapsibleHeading

In case of collapsible timeline item and no timestamp, this will be used as the heading

Type
string
Default
undefined

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
TIMELINE_ITEM_GROUP

icon

Pass a Paste Icon to display in place of dot

Type
FC<PropsWithChildren<GenericIconProps>>

timestamp

Timestamp to display in the timeline item

Type
string