Playbook Design System

Default

import React from 'react'

import { Timeline, Body, TitleDetail } from 'playbook-ui'

const TimelineDefault = (props) => (
  <div>
    <Timeline>
      <Timeline.Item
          icon="user"
          iconColor="royal"
      >
        <Body
            color="light"
            text="Conversation started"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="check"
          iconColor="teal"
      >
        <Body
            color="light"
            text="Trip #12422"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="credit-card"
          iconColor="red"
      >
        <Body
            color="light"
            text="Refund issue #12422"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="smile"
          iconColor="green"
      >
        <Body
            color="light"
            text="Conversation resolved"
        />
      </Timeline.Item>
    </Timeline>

    <br />
    <br />

    <Timeline>
      <Timeline.Item
          icon="user"
          iconColor="royal"
          lineStyle="dotted"
      >
        <TitleDetail
            detail="37-27 74th Street"
            title="Jackson heights"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="check"
          iconColor="teal"
      >
        <TitleDetail
            detail="81 Gate St Brooklyn"
            title="Greenpoint"
        />
      </Timeline.Item>
    </Timeline>
  </div>
)

export default TimelineDefault

Vertical

import React from 'react'

import { Timeline, Body, TitleDetail } from 'playbook-ui'

const TimelineVertical = (props) => (
  <div>
    <Timeline orientation="vertical">
      <Timeline.Item
          icon="user"
          iconColor="royal"
      >
        <Body
            color="light"
            text="Conversation started"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="check"
          iconColor="teal"
      >
        <Body
            color="light"
            text="Trip #12422"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="credit-card"
          iconColor="red"
      >
        <Body
            color="light"
            text="Refund issue #12422"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="smile"
          iconColor="green"
      >
        <Body
            color="light"
            text="Conversation resolved"
        />
      </Timeline.Item>
    </Timeline>

    <br />
    <br />

    <Timeline orientation="vertical">
      <Timeline.Item
          icon="user"
          iconColor="royal"
          lineStyle="dotted"
      >
        <TitleDetail
            detail="37-27 74th Street"
            title="Jackson Heights"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="check"
          iconColor="teal"
      >
        <TitleDetail
            detail="81 Gate St Brooklyn"
            title="Greenpoint"
        />
      </Timeline.Item>
    </Timeline>
  </div>
)

export default TimelineVertical

With Date

Use the optional showDate prop to render the timeline kit with a visible date. By default, if the date is from the current year, the year will not be displayed; however, if the date is NOT from the current year, the kit will display the year as well.

import React from 'react'

import { Timeline, TitleDetail } from 'playbook-ui'

const TimelineWithDate = (props) => (
  <div>
    <Timeline
        orientation="horizontal"
        showDate
    >
      <Timeline.Item
          date={new Date()}
          icon="user"
          iconColor="royal"
      >
        <TitleDetail
            detail="37-27 74th Street"
            title="Jackson Heights"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="check"
          iconColor="teal"
          lineStyle="dotted"
      >
        <TitleDetail
            detail="81 Gate St Brooklyn"
            title="Greenpoint"
        />
      </Timeline.Item>
      <Timeline.Item
          date={new Date().setDate(new Date().getDate() + 1)}
          icon="map-marker-alt"
          iconColor="purple"
      >
        <TitleDetail
            detail="72 E St Astoria"
            title="Society Hill"
        />
      </Timeline.Item>
    </Timeline>

    <br />
    <br />
    <br />

    <Timeline
        orientation="vertical"
        showDate
    >
      <Timeline.Item
          date={new Date()}
          icon="user"
          iconColor="royal"
      >
        <TitleDetail
            detail="37-27 74th Street"
            title="Jackson Heights"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="check"
          iconColor="teal"
          lineStyle="dotted"
      >
        <TitleDetail
            detail="81 Gate St Brooklyn"
            title="Greenpoint"
        />
      </Timeline.Item>
      <Timeline.Item
          date={new Date().setDate(new Date().getDate() + 1)}
          icon="map-marker-alt"
          iconColor="purple"
      >
        <TitleDetail
            detail="72 E St Astoria"
            title="Society Hill"
        />
      </Timeline.Item>
    </Timeline>

    <br/>
    <br/>
    <br/>

    <Timeline
        orientation="vertical"
        showDate
    >
      <Timeline.Item
          date={new Date('20 Mar 2018')}
          icon="user"
          iconColor="royal"
      >
        <TitleDetail
            detail="37-27 74th Street"
            title="Jackson Heights"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="check"
          iconColor="teal"
          lineStyle="dotted"
      >
        <TitleDetail
            detail="81 Gate St Brooklyn"
            title="Greenpoint"
        />
      </Timeline.Item>
      <Timeline.Item
          date={new Date('20 May 2018')}
          icon="map-marker-alt"
          iconColor="purple"
      >
        <TitleDetail
            detail="72 E St Astoria"
            title="Society Hill"
        />
      </Timeline.Item>
    </Timeline>
  </div>
)

export default TimelineWithDate

With Children

Any kit can be used inside of our compound components of label, step, or detail. Expand the code snippet below to see how to use these children elements.

import React from 'react'

import { Timeline, Title, Pill, TitleDetail } from 'playbook-ui'

const TimelineWithChildren = (props) => (
  <div>
    <Timeline orientation="horizontal"
        showDate
    >
      <Timeline.Item lineStyle="solid"
      >
        <Timeline.Label>
          <Title size={2}
              text='Any Kit Here'
          />
        </Timeline.Label>
        <Timeline.Step icon="user"
            iconColor="royal"
        />
        <Timeline.Detail>
          <TitleDetail detail="37-27 74th Street"
              title="Jackson Heights"
          />
        </Timeline.Detail>
      </Timeline.Item>

      <Timeline.Item lineStyle="dotted"
      >
        <Timeline.Step>
          <Pill text="Any Kit"
              variant="success"
          />
        </Timeline.Step>
        <Timeline.Detail>
          <TitleDetail detail="81 Gate St Brooklyn"
              title="Greenpoint"
          />
        </Timeline.Detail>
      </Timeline.Item>

      <Timeline.Item lineStyle="solid"
      >
        <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
        <Timeline.Step icon="map-marker-alt"
            iconColor="purple"
        />
        <Timeline.Detail>
          <TitleDetail detail="72 E St Astoria"
              title="Society Hill"
          />
        </Timeline.Detail>
      </Timeline.Item>
    </Timeline>

    <br />
    <br />
    <br />

    <Timeline orientation="vertical"
        showDate
    >
      <Timeline.Item lineStyle="solid"
      >
        <Timeline.Label>
          <Title size={4}
              text='Any Kit'
          />
        </Timeline.Label>
        <Timeline.Step icon="user"
            iconColor="royal"
        />
        <Timeline.Detail>
          <TitleDetail detail="37-27 74th Street"
              title="Jackson Heights"
          />
        </Timeline.Detail>
      </Timeline.Item>

      <Timeline.Item lineStyle="dotted"
      >
        <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
        <Timeline.Step icon="map-marker-alt"
            iconColor="purple"
        />
        <Timeline.Detail>
          <TitleDetail detail="72 E St Astoria"
              title="Society Hill"
          />
        </Timeline.Detail>
      </Timeline.Item>

      <Timeline.Item lineStyle="solid"
      >
        <Timeline.Step>
          <Pill text="3"
              variant="success"
          />
        </Timeline.Step>
        <Timeline.Detail>
          <TitleDetail detail="81 Gate St Brooklyn"
              title="Greenpoint"
          />
        </Timeline.Detail>
      </Timeline.Item>
    </Timeline>
  </div>
)

export default TimelineWithChildren

Show Current Year

By default, the Timeline kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting showCurrentYear/show_current_year to true. Pass it to Timeline.Item/timeline/item when using its date prop, or to Timeline.Label/timeline/label if following the "With Children" pattern.

import React from 'react'

import { Timeline, TitleDetail } from 'playbook-ui'

const TimelineShowCurrentYear = (props) => (
  <div>
    <Timeline
        orientation="horizontal"
        showDate
    >
      <Timeline.Item
          date={new Date()}
          icon="user"
          iconColor="royal"
          showCurrentYear
      >
        <TitleDetail
            detail="37-27 74th Street"
            title="Jackson Heights"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="check"
          iconColor="teal"
          lineStyle="dotted"
      >
        <TitleDetail
            detail="81 Gate St Brooklyn"
            title="Greenpoint"
        />
      </Timeline.Item>
      <Timeline.Item
          lineStyle="solid"
      >
        <Timeline.Label
            date={new Date()}
            showCurrentYear
        />
        <Timeline.Step
            icon="map-marker-alt"
            iconColor="purple"
        />
        <Timeline.Detail>
          <TitleDetail
              detail="72 E St Astoria"
              title="Society Hill"
          />
        </Timeline.Detail>
      </Timeline.Item>
    </Timeline>

    <br />
    <br />
    <br />

    <Timeline
        orientation="vertical"
        showDate
    >
      <Timeline.Item
          date={new Date()}
          icon="user"
          iconColor="royal"
          showCurrentYear
      >
        <TitleDetail
            detail="37-27 74th Street"
            title="Jackson Heights"
        />
      </Timeline.Item>
      <Timeline.Item
          icon="check"
          iconColor="teal"
          lineStyle="dotted"
      >
        <TitleDetail
            detail="81 Gate St Brooklyn"
            title="Greenpoint"
        />
      </Timeline.Item>
      <Timeline.Item
          lineStyle="solid"
      >
        <Timeline.Label
            date={new Date()}
            showCurrentYear
        />
        <Timeline.Step
            icon="map-marker-alt"
            iconColor="purple"
        />
        <Timeline.Detail>
          <TitleDetail
              detail="72 E St Astoria"
              title="Society Hill"
          />
        </Timeline.Detail>
      </Timeline.Item>
    </Timeline>
  </div>
)

export default TimelineShowCurrentYear

With Gap

Use the optional itemGap prop to render the timeline kit with adjusted spacing between nodes. The itemGap prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.

import React from 'react'

import { Timeline, Flex, FlexItem, Body } from 'playbook-ui'

const TimelineWithGap = (props) => (
  <div>
    <Flex justify="evenly">
    <FlexItem>
        <Timeline
            itemGap="xs"
            orientation="vertical"
        >
          <Timeline.Item
              icon="user"
              iconColor="royal"
          >
            <Body
                color="light"
                text="Conversation started"
            />
          </Timeline.Item>
          <Timeline.Item
              icon="check"
              iconColor="teal"
              lineStyle="dotted"
          >
            <Body
                color="light"
                text="Trip #12422"
            />
          </Timeline.Item>
          <Timeline.Item
              icon="credit-card"
              iconColor="red"
          >
            <Body
                color="light"
                text="Refund issue #12422"
            />
          </Timeline.Item>
        </Timeline>
      </FlexItem>
      <FlexItem>
        <Timeline
            itemGap="sm"
            orientation="vertical"
        >
          <Timeline.Item
              icon="user"
              iconColor="royal"
          >
            <Body
                color="light"
                text="Conversation started"
            />
          </Timeline.Item>
          <Timeline.Item
              icon="check"
              iconColor="teal"
              lineStyle="dotted"
          >
            <Body
                color="light"
                text="Trip #12422"
            />
          </Timeline.Item>
          <Timeline.Item
              icon="credit-card"
              iconColor="red"
          >
            <Body
                color="light"
                text="Refund issue #12422"
            />
          </Timeline.Item>
        </Timeline>
      </FlexItem>
      <FlexItem>
        <Timeline
            itemGap="md"
            orientation="vertical"
        >
          <Timeline.Item
              icon="user"
              iconColor="royal"
          >
            <Body
                color="light"
                text="Conversation started"
            />
          </Timeline.Item>
          <Timeline.Item
              icon="check"
              iconColor="teal"
              lineStyle="dotted"
          >
            <Body
                color="light"
                text="Trip #12422"
            />
          </Timeline.Item>
          <Timeline.Item
              icon="credit-card"
              iconColor="red"
              lineStyle="dotted"
          >
            <Body
                color="light"
                text="Refund issue #12422"
            />
          </Timeline.Item>
        </Timeline>
      </FlexItem>
      <FlexItem>
        <Timeline
            itemGap="lg"
            orientation="vertical"
        >
          <Timeline.Item
              icon="user"
              iconColor="royal"
          >
            <Body
                color="light"
                text="Conversation started"
            />
          </Timeline.Item>
          <Timeline.Item
              icon="check"
              iconColor="teal"
              lineStyle="dotted"
          >
            <Body
                color="light"
                text="Trip #12422"
            />
          </Timeline.Item>
          <Timeline.Item
              icon="credit-card"
              iconColor="red"
          >
            <Body
                color="light"
                text="Refund issue #12422"
            />
          </Timeline.Item>
        </Timeline>
      </FlexItem>
    </Flex>
  </div>
)

export default TimelineWithGap

Timeline

Available Props

Contribute to Playbook

Power

Connect