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="#" fontWeight="bold" color="gray.8" mr={1} muted>Monalisa</Link>created one <Link href="#" fontWeight="bold" color="gray.8" mr={1} muted>hot potato</Link><Link href="#" color="gray.7" 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 bg="red.5"><StyledOcticon icon={FlameIcon} color="white" /></Timeline.Badge><Timeline.Body>Red background used when closed events occur</Timeline.Body></Timeline.Item><Timeline.Item><Timeline.Badge bg="green.5"><StyledOcticon icon={FlameIcon} color="white" /></Timeline.Badge><Timeline.Body>Green background when opened or passed events occur</Timeline.Body></Timeline.Item><Timeline.Item><Timeline.Badge bg="purple.5"><StyledOcticon icon={FlameIcon} color="white" /></Timeline.Badge><Timeline.Body>Purple background used when pull requests are merged</Timeline.Body></Timeline.Item><Timeline.Item><Timeline.Badge bg="blue.5"><StyledOcticon icon={FlameIcon} color="white" /></Timeline.Badge><Timeline.Body>Blue background to indicate new events below</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 bg="red.5"><StyledOcticon icon={FlameIcon} color="white" /></Timeline.Badge><Timeline.Body>Red background used when closed events occur</Timeline.Body></Timeline.Item><Timeline.Break /><Timeline.Item><Timeline.Badge bg="green.5"><StyledOcticon icon={FlameIcon} color="white" /></Timeline.Badge><Timeline.Body>Green background when opened or passed events occur</Timeline.Body></Timeline.Item></Timeline>
Timeline and Timeline.Item components get COMMON
system props. Read our System Props doc page for a full list of available props.
Prop name | Type | Description |
---|---|---|
clipSidebar | Boolean | Hides the sidebar above the first Timeline.Item and below the last Timeline.Item. |
Prop name | Type | Description |
---|---|---|
condensed | Boolean | Reduces vertical padding and removes background from an item's badge. |