Timeline

The Timeline component is used to display items on a vertical Timeline, connected by Timeline elements.

Page navigation navigation

React

ready

Storybook|Source

Rails

ready

Docs|Lookbook|Source

React examples

Default

This is a message

<Timeline>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
</Timeline>

This is a message

<Timeline clipSidebar>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline clipSidebar>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
</Timeline>

Condensed items

This is a message

<Timeline>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
</Timeline>

The Timeline.Break component allows for content in Timeline to be visually seperated. This should be used for decorative purposes only. Since this component is decorative, it is not conveyed to assistive technologies like screen readers.

The content within Timeline.Item should clearly communicate the status and state of that item, so that if there is a need to seperate content, the context of the seperation is communicated in Timeline.Item.

This is a message

<Timeline>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Break />
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Break />
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge>
      <GitCommitIcon aria-label="Commit" />
    </Timeline.Badge>
    <Timeline.Body>This is a message</Timeline.Body>
  </Timeline.Item>
</Timeline>

Props

Timeline

Name	Default	Description
clipSidebar		`boolean` Hides the sidebar above the first Timeline.Item and below the last Timeline.Item.
sx Deprecated		`SystemStyleObject`

Timeline.Item

Name	Default	Description
condensed		`boolean` Reduces vertical padding and removes background from an item's badge.
sx Deprecated		`SystemStyleObject`

Timeline.Badge

Name	Default	Description
sx Deprecated		`SystemStyleObject`

Timeline.Body

Name	Default	Description
sx Deprecated		`SystemStyleObject`

Timeline.Break

Name	Default	Description
sx Deprecated		`SystemStyleObject`

Timeline

Page navigation navigation

React examples

Default

Clipped sidebar

Condensed items

With a break

Timeline breaks

Props

Timeline

Timeline.Item

Timeline.Badge

Timeline.Body

Timeline.Break