Timeline

Shows progress on a process over time.

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

() => (
  <Timeline>
    <TimelineStep label="Booked" subLabel="January 3, 10:43" type="success">
      You booked the trip and received e-tickets.
    </TimelineStep>
    <TimelineStep label="Checked in" subLabel="May 3, 8:45" type="success">
      You checked in for the trip and received boarding passes
    </TimelineStep>
    <TimelineStep label="Board" subLabel="May 4, 8:15" type="warning">
      Be at your departure gate at least 30 minutes before boarding.
    </TimelineStep>
    <TimelineStep label="Arrive" subLabel="May 4, 11:48">
      Arrive at your destination
    </TimelineStep>
  </Timeline>
)

When to use

You have a larger process (such as processing a customer request) broken into steps.
Users have no control over the process.
You want set user expectations about progress being made.

When not to use

There is a task users should complete and you want to nudge them along the process—use a wizard.

Content structure

Type indicator: shows the result of completed steps; label: sets the context for the step and works best when short; sub-label: adds additional context for the step; step content: describes the step in detail.

Visual style

Step types

Each completed step can have one of three results: success, warning, or critical. Use these types to add context for the process.

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

() => (
  <Timeline>
    <TimelineStep label="Booked" subLabel="January 3, 10:43" type="success">
      You booked the trip and received e-tickets.
    </TimelineStep>
    <TimelineStep label="Checked in" subLabel="" type="warning">
      Please check in before your trip.
    </TimelineStep>
    <TimelineStep label="Board" subLabel="May 4, 8:15" type="critical">
      You need to check in before you can board.
    </TimelineStep>
    <TimelineStep label="Arrive" subLabel="May 4, 11:48">
      Arrive at your destination
    </TimelineStep>
  </Timeline>
)

Component status

Figma

Designing

Web (React)

Released

iOS (Swift)

n/a

Android (Kotlin)

n/a

Docs

Released