The Timeline.Item component is used to display items on a vertical timeline, connected by Timeline.Badge elements.
<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>
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>
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 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>
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>
| Name | Type | Default | Description |
|---|---|---|---|
| clipSidebar | Boolean | Hides the sidebar above the first Timeline.Item and below the last Timeline.Item. | |
| sx | SystemStyleObject | {} | Style to be applied to the component |
| Name | Type | Default | Description |
|---|---|---|---|
| condensed | Boolean | Reduces vertical padding and removes background from an item's badge. | |
| sx | SystemStyleObject | {} | Style to be applied to the component |
| Name | Type | Default | Description |
|---|---|---|---|
| sx | SystemStyleObject | {} | Style to be applied to the component |
| Name | Type | Default | Description |
|---|---|---|---|
| sx | SystemStyleObject | {} | Style to be applied to the component |
| Name | Type | Default | Description |
|---|---|---|---|
| sx | SystemStyleObject | {} | Style to be applied to the component |