On this page

Timeline

The timeline component is used to display items on a vertical timeline, connected by Timeline.Badge elements.
  • Alpha
  • Not reviewed for accessibility
On this page

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

Examples

Default Color example

The default Timeline.Badge color is dark text on a light grey background.

Default badge color

Adding color to a Badge

To have color variants, use the bg prop on the Timeline.Badge. If an icon is being used, set the color prop of the child Octicon if necessary.

Background used when closed events occur
Background when opened or passed events occur
Background used when pull requests are merged

Condensed items

Timeline has a condensed prop that will reduce the vertical padding and remove the background from the badge item. These are most commonly used in commits. To condense a single item, remove the top or bottom padding with the pt={0} or pb={0} prop.

This is the message of a condensed TimelineItem
This is the message of a condensed TimelineItem

Timeline Break

To create a visual break in the timeline, use Timeline.Break. This adds a horizontal bar across the timeline to show that something has disrupted it. Usually this happens when a close or merged event occurs.

Background used when closed events occur
Background when opened or passed events occur

Props

Timeline

NameTypeDefaultDescription
clipSidebar
boolean

Hides the sidebar above the first Timeline.Item and below the last Timeline.Item.

sx
SystemStyleObject

Timeline.Item

NameTypeDefaultDescription
condensed
boolean

Reduces vertical padding and removes background from an item's badge.

sx
SystemStyleObject

Timeline.Badge

NameTypeDefaultDescription
sx
SystemStyleObject

Timeline.Body

NameTypeDefaultDescription
sx
SystemStyleObject

Timeline.Break

NameTypeDefaultDescription
sx
SystemStyleObject