Timeline The timeline component is used to display items on a vertical timeline, connected by Timeline.Badge elements.
Not reviewed for accessibility 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 overrides to apply to the component. See also overriding styles .
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 .