Skip to content

Timeline

Timeline is a group of steps in a prescribed order with statuses that reflect progress.
Figma logo
Anatomy of a Timeline: content in the body of the element with a close action in the upper-right corner
Illustrating the parent-child relationship between Timeline and Timeline Step
Explaining the relationship between Timeline and Timeline Step
ItemNameDescription
A<Timeline />The parent component—rendered as an ol—that wraps <TimelineStep /> children components
B<TimelineStep />The child component—rendered as an li—that contains the main content for a given step
Three steps with markers indicating that the height and width are automatically determined based on the size of the step content
Timeline’s height and width are determined by the content of the Timeline Step(s)
Anatomy of a Timeline: content in the body of the element with a close action in the upper-right corner
Illustrating the pieces that make up a Timeline Step
Explaining the pieces that make up a Timeline Step
ItemNameDescription
AStep circleThe status of the <TimelineStep />
B<Check />Icon used to indicate the <TimelineStep /> is completed
CStep lineA border illustrating the visual connection between steps
D<Heading />The title of the step should use the Heading component
E<HeadingSubtext />The subtitle of the step should use the HeadingSubtext component
FStep contentContains any other children passed to the <TimelineStep /> such as a paragraph or a Button
A step with markers indicating that the height and width are automatically determined based on the size of the step content; status icons are sized 24px × 24px and the border connecting steps is 2px wide
A Step’s dimensions are determined by its content and marked with a 2px border; step circles are sized 24px × 24px

Tag can be used to indicate warnings or errors.

The Heading component allows for the separation of style and semantics, meaning that we can specify a custom typePreset to any heading level to suit the page design.

React props
NameTypeDefaultDescription
children  ReactNodeThree or more instances of TimelineStep
React props
NameTypeDefaultDescription
children  ReactNodestringThe content of the step
status  activeinactivepartialsuccessinactiveThe status of the step

The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.

render(
<Timeline>
<TimelineStep status="success">
<Heading level={3}>One</Heading>
</TimelineStep>
<TimelineStep status="partial">
<Heading level={3}>Two</Heading>
<p>Step two description</p>
<Button variant="primary">Get started</Button>
</TimelineStep>
<TimelineStep>
<Heading level={3}>Three</Heading>
</TimelineStep>
<TimelineStep status="inactive">
<Heading level={3}>Four</Heading>
</TimelineStep>
</Timeline>,
);
const timeline = screen.getByRole('list');
const steps = within(timeline).getAllByRole('listitem', { name: 'Step' });
expect(steps[0]).toHaveAccessibleDescription('Completed step');
expect(steps[1]).toHaveAccessibleDescription('Partially completed step');
expect(steps[2]).toHaveAccessibleDescription('Current step');
expect(steps[3]).toHaveAccessibleDescription('Future step');
expect(within(steps[0]).getByRole('heading')).toHaveTextContent('One');
expect(within(steps[1]).getByRole('heading')).toHaveTextContent('Two');
expect(within(steps[1]).getByText('Step two description')).toBeInTheDocument();
expect(within(steps[1]).getByRole('button', { name: 'Get started' })).toBeInTheDocument();
expect(within(steps[2]).getByRole('heading')).toHaveTextContent('Three');
expect(within(steps[3]).getByRole('heading')).toHaveTextContent('Four');