Skip to content

Timeline

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

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 StyledOcticon if necessary.

Red background used when closed events occur
Green background when opened or passed events occur
Purple background used when pull requests are merged
Blue background to indicate new events below

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.

Red background used when closed events occur
Green background when opened or passed events occur

System props

Timeline and Timeline.Item components get COMMON system props. Read our System Props doc page for a full list of available props.

Component props

Timeline

Prop nameTypeDescription
clipSidebarBooleanHides the sidebar above the first Timeline.Item and below the last Timeline.Item.

Timeline.Item

Prop nameTypeDescription
condensedBooleanReduces vertical padding and removes background from an item's badge.
Edit this page on GitHub
2 contributorsemplumsdmarcey
Last edited by emplums on July 1, 2020