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” |