Timeline

Shows progress on a process over time.

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>

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

NameTypeDefaultDescription
childrenReact.NodeList of TimelineStep components
dataTeststringOptional prop for testing purposes.
spaceAfterenumAdditional margin-bottom after component. See this docs
import TimelineStep from "@kiwicom/orbit-components/lib/Timeline/TimelineStep";

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
type
“success”
“warning”
“critical”