Developer mode
Opens components on the React tab by default.
Your bookmarks

Timeline / React

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>

Props

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

Name Type Default Description
children React.Node List of TimelineStep components
dataTest string Optional prop for testing purposes.
spaceAfter enum Additional margin-bottom after component. See this docs

Subcomponents

TimelineStep

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

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

Name Type Default Description
children React.Node The content of the component
label string Text for Badge component inside
type enum Type of current process step
subLabel string SubLabel text of current process step

enum

type
“success”
“warning”
“critical”