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

Example with in-line links

<Timeline>
  <Timeline.Item>
    <Timeline.Badge>
      <StyledOcticon icon={FlameIcon} />
    </Timeline.Badge>
    <Timeline.Body>
      <Link href="#" sx={{fontWeight: 'bold', color: 'fg.default', mr: 1}} muted>
        Monalisa
      </Link>
      created one <Link href="#" sx={{fontWeight: 'bold', color: 'fg.default', mr: 1}} muted>
        hot potato
      </Link>
      <Link href="#" color="fg.muted" muted>
        Just now
      </Link>
    </Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline>
  <Timeline.Item>
    <Timeline.Badge>
      <StyledOcticon icon={FlameIcon} />
    </Timeline.Badge>
    <Timeline.Body>
      <Link href="#" sx={{fontWeight: 'bold', color: 'fg.default', mr: 1}} muted>
        Monalisa
      </Link>
      created one <Link href="#" sx={{fontWeight: 'bold', color: 'fg.default', mr: 1}} muted>
        hot potato
      </Link>
      <Link href="#" color="fg.muted" muted>
        Just now
      </Link>
    </Timeline.Body>
  </Timeline.Item>
</Timeline>

Default Color example

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

<Timeline>
  <Timeline.Item>
    <Timeline.Badge>
      <StyledOcticon icon={FlameIcon} />
    </Timeline.Badge>
    <Timeline.Body>Default badge color</Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline>
  <Timeline.Item>
    <Timeline.Badge>
      <StyledOcticon icon={FlameIcon} />
    </Timeline.Badge>
    <Timeline.Body>Default badge color</Timeline.Body>
  </Timeline.Item>
</Timeline>

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.

<Timeline>
  <Timeline.Item>
    <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
    </Timeline.Badge>
    <Timeline.Body>Background used when closed events occur</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
      <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
    </Timeline.Badge>
    <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
    </Timeline.Badge>
    <Timeline.Body>Background used when pull requests are merged</Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline>
  <Timeline.Item>
    <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
    </Timeline.Badge>
    <Timeline.Body>Background used when closed events occur</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
      <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
    </Timeline.Badge>
    <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
    </Timeline.Badge>
    <Timeline.Body>Background used when pull requests are merged</Timeline.Body>
  </Timeline.Item>
</Timeline>

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>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <StyledOcticon icon={GitCommitIcon} />
    </Timeline.Badge>
    <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <StyledOcticon icon={GitCommitIcon} />
    </Timeline.Badge>
    <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <StyledOcticon icon={GitCommitIcon} />
    </Timeline.Badge>
    <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
  </Timeline.Item>
  <Timeline.Item condensed>
    <Timeline.Badge>
      <StyledOcticon icon={GitCommitIcon} />
    </Timeline.Badge>
    <Timeline.Body>This is the message of a condensed TimelineItem</Timeline.Body>
  </Timeline.Item>
</Timeline>

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.

<Timeline>
  <Timeline.Item>
    <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
      <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
    </Timeline.Badge>
    <Timeline.Body>Background used when closed events occur</Timeline.Body>
  </Timeline.Item>
  <Timeline.Break />
  <Timeline.Item>
    <Timeline.Badge sx={{bg: 'success.emphasis'}}>
      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
    </Timeline.Badge>
    <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
  </Timeline.Item>
</Timeline>

<Timeline>
  <Timeline.Item>
    <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
      <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
    </Timeline.Badge>
    <Timeline.Body>Background used when closed events occur</Timeline.Body>
  </Timeline.Item>
  <Timeline.Break />
  <Timeline.Item>
    <Timeline.Badge sx={{bg: 'success.emphasis'}}>
      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
    </Timeline.Badge>
    <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
  </Timeline.Item>
</Timeline>

Props

Timeline

Name	Type	Default	Description
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

Name	Type	Default	Description
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

Name	Type	Default	Description
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

Timeline.Body

Name	Type	Default	Description
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

Timeline.Break

Name	Type	Default	Description
sx	SystemStyleObject		Style overrides to apply to the component. See also overriding styles.

Edit this page on GitHub

2 contributors

Last edited by joshblack on February 9, 2023