Timeline

The timeline displays a list of events in chronological order.

Import

Timeline: The timeline component.
TimelineItem: A helper component designed to represent an item inside a timeline.

Basic usage

<Timeline>
  <TimelineItem date={new Date("2020-12-22T21:29:00.000Z")}>
    <section>
      <div>New request created</div>
      <div>Submitted by Roger Dupont</div>
      <div>Amount requested: 39€</div>
    </section>
  </TimelineItem>
  <TimelineItem date={new Date("2021-01-05T14:29:00.000Z")}>
    <section>
      <div>Approved by manager</div>
      <div>Approver: Jean</div>
    </section>
  </TimelineItem>
  <TimelineItem date={new Date("2021-01-08T08:24:00.000Z")}>
    <div className="flex items-center gap-4">
      <Tag variant="success" iconName="circle-check">
        Validated
      </Tag>
      by
      <Tag variant="carbon">Finance Team</Tag>
    </div>
  </TimelineItem>
</Timeline>

With custom render date

The renderDate prop is used to render the date with a different format than the default one.

<Timeline renderDate={(date, locale) => date.toLocaleString(locale)}>
  <TimelineItem date={new Date("2020-12-22T21:29:00.000Z")}>
    <section>
      <div>New request created</div>
      <div>Submitted by Roger Dupont</div>
      <div>Amount requested: 39€</div>
    </section>
  </TimelineItem>
  <TimelineItem date={new Date("2021-01-05T14:29:00.000Z")}>
    <section>
      <div>Approved by manager</div>
      <div>Approver: Jean</div>
    </section>
  </TimelineItem>
  <TimelineItem date={new Date("2021-01-08T08:24:00.000Z")}>
    <div className="flex items-center gap-4">
      <Tag variant="success" iconName="circle-check">
        Validated
      </Tag>
      by
      <Tag variant="carbon">Finance Team</Tag>
    </div>
  </TimelineItem>
</Timeline>

Basic usage

December 22, 2020 at 9:29 PM
New request created
Submitted by Roger Dupont
Amount requested: 39€
January 5, 2021 at 2:29 PM
Approved by manager
Approver: Jean
January 8, 2021 at 8:24 AM
Validated
by Finance Team

<Timeline>
  <TimelineItem date={new Date("2020-12-22T21:29:00.000Z")}>
    <section>
      <div>New request created</div>
      <div>Submitted by Roger Dupont</div>
      <div>Amount requested: 39€</div>
    </section>
  </TimelineItem>
  <TimelineItem date={new Date("2021-01-05T14:29:00.000Z")}>
    <section>
      <div>Approved by manager</div>
      <div>Approver: Jean</div>
    </section>
  </TimelineItem>
  <TimelineItem date={new Date("2021-01-08T08:24:00.000Z")}>
    <div className="flex items-center gap-4">
      <Tag variant="success" iconName="circle-check">
        Validated
      </Tag>
      by
      <Tag variant="carbon">Finance Team</Tag>
    </div>
  </TimelineItem>
</Timeline>

With custom render date

The renderDate prop is used to render the date with a different format than the default one.

12/22/2020, 9:29:00 PM
New request created
Submitted by Roger Dupont
Amount requested: 39€
1/5/2021, 2:29:00 PM
Approved by manager
Approver: Jean
1/8/2021, 8:24:00 AM
ValidatedbyFinance Team

<Timeline renderDate={(date, locale) => date.toLocaleString(locale)}>
  <TimelineItem date={new Date("2020-12-22T21:29:00.000Z")}>
    <section>
      <div>New request created</div>
      <div>Submitted by Roger Dupont</div>
      <div>Amount requested: 39€</div>
    </section>
  </TimelineItem>
  <TimelineItem date={new Date("2021-01-05T14:29:00.000Z")}>
    <section>
      <div>Approved by manager</div>
      <div>Approver: Jean</div>
    </section>
  </TimelineItem>
  <TimelineItem date={new Date("2021-01-08T08:24:00.000Z")}>
    <div className="flex items-center gap-4">
      <Tag variant="success" iconName="circle-check">
        Validated
      </Tag>
      by
      <Tag variant="carbon">Finance Team</Tag>
    </div>
  </TimelineItem>
</Timeline>