Description
A timeline shows events in chronological order and gives a great overview of the overall process. The component itself has interchangeable icons, additional info message when needed, and a step has three states(completed, current or upcoming).
Demos
Timeline with multiple timeline items:
We can pass down a list of timeline items as a variable to data.
It's also possible to pass down timeline items as children, see example.
- Completed event10. september 2021
- Current eventAdditional information about this step if needed.
- Upcoming event
Code Editor
render( <Timeline data={[ { title: 'Completed event', subtitle: '10. september 2021', state: 'completed', }, { title: 'Current event', infoMessage: 'Additional information about this step if needed.', state: 'current', }, { title: 'Upcoming event', state: 'upcoming', }, ]} />, )
Timeline with multiple timeline items passed down as children:
Passing down timeline items as children
- Completed event10. september 2021
- Current eventAdditional information about this step if needed.
- Upcoming event
Code Editor
<Timeline> <Timeline.Item title="Completed event" subtitle="10. september 2021" state="completed" /> <Timeline.Item title="Current event" infoMessage="Additional information about this step if needed." state="current" /> <Timeline.Item title="Upcoming event" state="upcoming" /> </Timeline>
Examples of Timelines with one timeline item:
Completed timeline item:
- Completed event
Code Editor
<Timeline data={[ { title: 'Completed event', state: 'completed', }, ]} />
Current timeline item:
- Current event
Code Editor
<Timeline data={[ { title: 'Current event', state: 'current', }, ]} />
Upcoming timeline item:
- Upcoming event
Code Editor
<Timeline data={[ { title: 'Upcoming event', state: 'upcoming', }, ]} />
Setting property state of timeline item:
Property state changes styling of icon, border, and font of the timeline item
- Completed event10. september 2021Additional information about this step if needed.
- Current event10. september 2021Additional information about this step if needed.
- Upcoming event10. september 2021Additional information about this step if needed.
Code Editor
render( <Timeline data={[ { title: 'Completed event', subtitle: '10. september 2021', infoMessage: 'Additional information about this step if needed.', state: 'completed', }, { title: 'Current event', subtitle: '10. september 2021', infoMessage: 'Additional information about this step if needed.', state: 'current', }, { title: 'Upcoming event', subtitle: '10. september 2021', infoMessage: 'Additional information about this step if needed.', state: 'upcoming', }, ]} />, )
Setting property icon of timeline items:
Property icon is by default set based on the value of state property, but can be overwritten by passing a icon, see how to import icons.
See default icons based on value of state property in documentation for icon property of the timeline item
- Completed event
- Current event
- Upcoming event
Code Editor
render( <Timeline data={[ { title: 'Completed event', state: 'completed', icon: Confetti, iconAlt: 'Celebration', }, { title: 'Current event', state: 'current', icon: Card, iconAlt: 'Bank card', }, { title: 'Upcoming event', state: 'upcoming', icon: AccountCard, iconAlt: 'Money bag & card', }, ]} />, )
Timeline skeleton:
- Upcoming10. september 2021
- Current11. september 2021
- Completed12. september 2021
Code Editor
<Timeline skeleton data={[ { title: 'Upcoming', subtitle: '10. september 2021', state: 'upcoming', }, { title: 'Current', subtitle: '11. september 2021', state: 'current', }, { title: 'Completed', subtitle: '12. september 2021', state: 'completed', }, ]} />
Timeline as children skeleton:
- Upcoming10. september 2021
- Current11. september 2021
- Completed11. september 2021
Code Editor
<Timeline skeleton> <Timeline.Item title="Upcoming" subtitle="10. september 2021" state="upcoming" /> <Timeline.Item title="Current" subtitle="11. september 2021" state="current" /> <Timeline.Item title="Completed" subtitle="11. september 2021" state="completed" /> </Timeline>
Timeline item skeleton:
- Completed event#110. september 2021
- Completed event#211. september 2021Additional information about this step if needed.
Code Editor
<Timeline data={[ { title: 'Completed event#1', subtitle: '10. september 2021', state: 'completed', skeleton: true, }, { title: 'Completed event#2', subtitle: '11. september 2021', infoMessage: 'Additional information about this step if needed.', state: 'completed', }, ]} />
Timeline with multiple completed timeline items:
- Completed event#110. september 2021Additional information about this step if needed.
- Completed event#2Additional information about this step if needed.
- Completed event#310. september 2021
Code Editor
render( <Timeline data={[ { title: 'Completed event#1', infoMessage: 'Additional information about this step if needed.', subtitle: '10. september 2021', state: 'completed', }, { title: 'Completed event#2', infoMessage: 'Additional information about this step if needed.', state: 'completed', }, { title: 'Completed event#3', subtitle: '10. september 2021', state: 'completed', }, ]} />, )
Timeline with multiple current timeline items:
- Current event#110. september 2021Additional information about this step if needed.
- Current event#2Additional information about this step if needed.
- Current event#310. september 2021
Code Editor
render( <Timeline data={[ { title: 'Current event#1', infoMessage: 'Additional information about this step if needed.', subtitle: '10. september 2021', state: 'current', }, { title: 'Current event#2', infoMessage: 'Additional information about this step if needed.', state: 'current', }, { title: 'Current event#3', subtitle: '10. september 2021', state: 'current', }, ]} />, )
Timeline with multiple upcoming timeline items:
- Upcoming event#110. september 2021Additional information about this step if needed.
- Upcoming event#2Additional information about this step if needed.
- Upcoming event#310. september 2021
Code Editor
render( <Timeline data={[ { title: 'Upcoming event#1', infoMessage: 'Additional information about this step if needed.', subtitle: '10. september 2021', state: 'upcoming', }, { title: 'Upcoming event#2', infoMessage: 'Additional information about this step if needed.', state: 'upcoming', }, { title: 'Upcoming event#3', subtitle: '10. september 2021', state: 'upcoming', }, ]} />, )