Playbook Design System

Default

import React from 'react'

import Timeline from 'playbook-ui'
import Body from 'playbook-ui'
import 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 from 'playbook-ui'
import Body from 'playbook-ui'
import 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. If the date is from the current year, the year will not be displayed, however if date is NOT from the current year, the kit will display the year as well.

import React from 'react'

import Timeline from 'playbook-ui'
import 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 from 'playbook-ui'
import Title from 'playbook-ui'
import Pill from 'playbook-ui'

import 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

With Gap

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

import React from 'react'

import Timeline from 'playbook-ui'
import Flex from 'playbook-ui'
import FlexItem from 'playbook-ui'
import Body from 'playbook-ui'

const TimelineWithGap = (props) => (
  <div>
    <Flex justify="evenly">
    <FlexItem>
        <Timeline
            gap="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
            gap="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
            gap="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
            gap="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