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.

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.

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.

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.

Props

Timeline

NameTypeDefaultDescription
clipSidebar
boolean
Hides the sidebar above the first Timeline.Item and below the last Timeline.Item.
sx
SystemStyleObject
Style overrides to apply to the component. See also overriding styles.

Timeline.Item

NameTypeDefaultDescription
condensed
boolean
Reduces vertical padding and removes background from an item's badge.
sx
SystemStyleObject
Style overrides to apply to the component. See also overriding styles.

Timeline.Badge

NameTypeDefaultDescription
sx
SystemStyleObject
Style overrides to apply to the component. See also overriding styles.

Timeline.Body

NameTypeDefaultDescription
sx
SystemStyleObject
Style overrides to apply to the component. See also overriding styles.

Timeline.Break

NameTypeDefaultDescription
sx
SystemStyleObject
Style overrides to apply to the component. See also overriding styles.