Timeline

Shows progress on a process over time.

Timeline

To implement Timeline component into your project you’ll need to add the import:

import Timeline, { TimelineStep } from "@kiwicom/orbit-components/lib/Timeline";

After adding import into your project you can use it simply like:

<Timeline>
<TimelineStep label="In Progress" time="20.05.2020" type="success">
We’ll wait for the carrier(s) to send us the refund and contact them again if necessary.
</TimelineStep>
</Timeline>

Props

Table below contains all types of the props available in the Timeline component.

NameTypeDefaultDescription
childrenReact.NodeList of TimelineStep components
dataTeststringOptional prop for testing purposes.
idstringSet id for Timeline
spaceAfterenumAdditional margin-bottom after component. See this docs
direction"column" \| "row"Allows to set direction, by default on desktop is row and on mobile is set to column

Subcomponents

TimelineStep

import TimelineStep from "@kiwicom/orbit-components/lib/Timeline/TimelineStep";

Props

Table below contains all types of the props in TimelineStep component.

NameTypeDefaultDescription
childrenReact.NodeThe content of the component
labelstringText for Badge component inside
typeenumType of current process step
subLabelstringSubLabel text of current process step

enum

type
“success”
“warning”
“critical”