Playbook Design System

Empty State

Default

import React from 'react'

import { EmptyState, Flex } from 'playbook-ui'

const EmptyStateDefault = (props) => (
  <Flex align="center"
      orientation="column"
  >
    <EmptyState
        description="Body text goes into detail with possible steps for user to take"
        header="Title Explains"
        image="default"
    />
  </Flex>
)

export default EmptyStateDefault

Size

import React from 'react'

import { EmptyState, Flex } from 'playbook-ui'

const EmptyStateSize = (props) => (
  <Flex align="center"
      spacing="evenly"
  >
      <EmptyState
          alignment="center"
          description="Body text goes into detail with possible steps for user to take"
          header="Title Explains"
          image="default"
          linkButton="Alt Action"
          onLinkButtonClick={() => alert("link button clicked!")}
          onPrimaryButtonClick={() => alert("primary button clicked!")}
          primaryButton="Next Action"
          size="sm"
      />
      <EmptyState
          alignment="center"
          description="Body text goes into detail with possible steps for user to take"
          header="Title Explains"
          image="default"
          linkButton="Alt Action"
          onLinkButtonClick={() => alert("link button clicked!")}
          onPrimaryButtonClick={() => alert("primary button clicked!")}
          primaryButton="Next Action"
          size="lg"
      />
  </Flex>
)

export default EmptyStateSize

Orientation

import React from 'react'

import { EmptyState, Flex } from 'playbook-ui'

const EmptyStateOrientation = (props) => (
  <Flex align="center"
      orientation="column"
  >
    <EmptyState
        alignment="left"
        description="Body text goes into detail with possible steps for user to take"
        header="Title Explains"
        image="default"
        orientation="horizontal"
        primaryButton="Next Action"
        size="lg"
    />
  </Flex>
)

export default EmptyStateOrientation

Alignment

import React from 'react'

import { EmptyState, Flex } from 'playbook-ui'

const EmptyStateAlignment = (props) => (
  <Flex align="center"
      spacing="evenly"
  >
      <EmptyState
          alignment="left"
          description="Body text goes into detail with possible steps for user to take"
          header="Title Explains"
          image="default"
          primaryButton="Next Action"
          size="md"
      />
      <EmptyState
          alignment="center"
          description="Body text goes into detail with possible steps for user to take"
          header="Title Explains"
          image="default"
          primaryButton="Next Action"
          size="md"
      />
      <EmptyState
          alignment="right"
          description="Body text goes into detail with possible steps for user to take"
          header="Title Explains"
          image="default"
          primaryButton="Next Action"
          size="md"
      />
  </Flex>
)

export default EmptyStateAlignment

Loading Inline

Default

import React from 'react'

import { LoadingInline } from 'playbook-ui'

const LoadingInlineDefault = (props) => {
  return (
    <div>
      <LoadingInline
      />
      <LoadingInline
          align="center"
      />
      <LoadingInline
          align="right"
      />
    </div>
  )
}

export default LoadingInlineDefault

Custom Text

import React from 'react'

import { LoadingInline } from 'playbook-ui'

const LoadingInlineCustom = (props) => {
  return (
    <div>
      <LoadingInline
          text=' Saving'
      />
      <LoadingInline
          align="center"
          text=' Saving'
      />
      <LoadingInline
          align="right"
          text=' Saving'
      />
    </div>
  )
}

export default LoadingInlineCustom

Variant

import React from 'react'

import { LoadingInline } from 'playbook-ui'

const LoadingInlineVariant = (props) => {
  return (
    <div>
      <LoadingInline 
          text=" Dotted Spinner" 
          variant="dotted"
      />

      <br />
  
      <LoadingInline
          text=" Solid Spinner"
          variant="solid"
      />
    </div>
  )
}

export default LoadingInlineVariant

Progress Pills

Default

Progress pills start at 45px wide if the container allows, but will shrink down to 1px as the container gets smaller. Resize this window to see each pill shrink.

import React from 'react'

import { ProgressPills } from 'playbook-ui'

const ProgressPillsDefault = (props) => {
    return (
        <>
            <ProgressPills
                active={2}
                aria={{ label: '2 out of 3 steps complete' }}
                steps={3}
            />
            <ProgressPills
                active={9}
                aria={{ label: '9 out of 18 steps complete' }}
                marginTop="md"
                steps={18}
            />
        </>
    )
}

export default ProgressPillsDefault

Status

import React from 'react'

import { ProgressPills } from 'playbook-ui'

const ProgressPillsStatus = (props) => {
    return (
        <>
            <ProgressPills
                active={2}
                aria={{ label: '2 out of 3 steps complete' }}
                steps={3}
                title="Status:"
                value="Orientation"
            />
        </>
    )
}

export default ProgressPillsStatus

Full Container Width

Pass fullWidthPill to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

import React from 'react'

import { ProgressPills } from 'playbook-ui'

const ProgressPillsFullWidth = (props) => {
    return (
        <>
            <ProgressPills
                active={2}
                aria={{ label: '2 out of 5 steps complete' }}
                fullWidthPill
                steps={5}
            />
        </>
    )
}

export default ProgressPillsFullWidth

Progress Simple

Default

import React from 'react'

import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleDefault = () => {
  return (
    <div>
      <ProgressSimple percent={45} />
    </div>
  )
}

export default ProgressSimpleDefault

Setting Values

import React from 'react'

import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleValue = () => {
  return (
    <div>
      <ProgressSimple
          align="left"
          percent={68}
      />
      <br />
      <ProgressSimple
          max="10"
          value="2"
      />
    </div>
  )
}

export default ProgressSimpleValue

Within a Flex

When rendering a Progress Simple through within a Flex container, you must pass flex="1" to the kit itself so that it fills the available space

import React from 'react'

import { Flex, ProgressSimple } from 'playbook-ui'

const ProgressSimpleFlex = () => {
  return (
    <Flex>
      <ProgressSimple
          align="left"
          flex="1"
          percent={68}
      />
    </Flex>
  )
}

export default ProgressSimpleFlex

Progress Bar Width

import React from 'react'

import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleValue = () => {
  return (
    <div>
      <ProgressSimple
          percent={40}
          width="100px"
      />
    </div>
  )
}

export default ProgressSimpleValue

Variants

Progress Simple can pass colors - primary, green, red, and yellow. Variants names are default, positive, negative, and warning, respectively.

import React from 'react'

import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleVariants = () => {
  return (
    <div>
      <ProgressSimple percent={64.5} />

      <br />

      <ProgressSimple
          percent={90}
          variant="positive"
      />

      <br />

      <ProgressSimple
          percent={10}
          variant="negative"
      />

      <br />

      <ProgressSimple
          percent={40}
          variant="warning"
      />
    </div>
  )
}

export default ProgressSimpleVariants

Muted

import React from 'react'

import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleMuted = () => {
  return (
    <div>
      <ProgressSimple
          muted
          percent={68}
      />
    </div>
  )
}

export default ProgressSimpleMuted

Align

import React from 'react'

import { ProgressSimple } from 'playbook-ui'

const ProgressSimpleAlign = () => {
  return (
    <div>
      <ProgressSimple
          align="left"
          percent={45}
          width="100px"
      />
      <br />
      <ProgressSimple
          align="center"
          percent={45}
          width="100px"
      />
      <br />
      <ProgressSimple
          align="right"
          percent={45}
          width="100px"
      />
    </div>
  )
}

export default ProgressSimpleAlign

The variant prop can be set to tracker to achieve this UI. Tracker is only available with the horizontal orientation and it is also recommended that you set the icon prop to true for this variant.

This variant takes children just like the default progress step, however, it is best to use the caption kit for children in this variant.

import React from 'react'

import { ProgressStep, ProgressStepItem, Caption } from 'playbook-ui'

const ProgressStepTracker = (props) => (
  <div>
    <br />
    <ProgressStep
        icon
        variant="tracker"
    >
      <ProgressStepItem status="complete">
        <Caption>{'Ordered'}</Caption>
      </ProgressStepItem>
      <ProgressStepItem status="active">
        <Caption>{'Shipped'}</Caption>
      </ProgressStepItem>
      <ProgressStepItem status="inactive">
        <Caption>{'Delivered'}</Caption>
      </ProgressStepItem>
    </ProgressStep>

    <br />
    <ProgressStep
        icon
        variant="tracker"
    >
      <ProgressStepItem status="complete" />
      <ProgressStepItem status="complete" />
      <ProgressStepItem status="hidden" />
      <ProgressStepItem status="active" />
      <ProgressStepItem status="inactive" />
    </ProgressStep>
  </div>
)

export default ProgressStepTracker

Color

The color prop can also be used to set color for the tracker variant. Options for color are primary and info with default being set to primary.

NOTE: The color prop is only available with the tracker variant.

import React from 'react'

import { ProgressStep, ProgressStepItem, Caption } from 'playbook-ui'

const ProgressStepColor = (props) => (
  <div>
    <br />
    <ProgressStep 
        color="info"
        icon 
        variant="tracker"
    >
      <ProgressStepItem status="complete">
        <Caption>{'Ordered'}</Caption>
      </ProgressStepItem>
      <ProgressStepItem status="active">
        <Caption>{'Shipped'}</Caption>
      </ProgressStepItem>
      <ProgressStepItem status="inactive">
        <Caption>{'Delivered'}</Caption>
      </ProgressStepItem>
    </ProgressStep>
  </div>
)

export default ProgressStepColor

Custom Icon

Custom icons can also be set for individual steps. Simply use the icon prop for the relevant ProgressStepItem/progress_step_item as shown here.

import React from 'react'

import { ProgressStep, ProgressStepItem, Caption } from 'playbook-ui'

const ProgressStepCustomIcon = (props) => (
  <div>
    <br />
    <ProgressStep 
        icon 
        variant="tracker"
    >
      <ProgressStepItem status="complete">
        <Caption>{'Ordered'}</Caption>
      </ProgressStepItem>
      <ProgressStepItem 
          icon="exclamation-triangle"
          status="active" 
      >
        <Caption>{'Shipped'}</Caption>
      </ProgressStepItem>
      <ProgressStepItem status="inactive">
        <Caption>{'Delivered'}</Caption>
      </ProgressStepItem>
    </ProgressStep>
  </div>
)

export default ProgressStepCustomIcon

Using State

import React, { useState } from 'react'

import { ProgressStep, ProgressStepItem, Caption, Button } from 'playbook-ui'

const ProgressStepTrackerClickEvents = (props) => {
  const [warning, setWarning] = useState(false)
  const showWarning = warning == true
  const WarningIcon = (
    <ProgressStepItem
        icon="exclamation-triangle"
        key={Math.random()}
        status="active"
    >
      <Caption>{'Shipped'}</Caption>
    </ProgressStepItem>
  )
  const CheckedIcon = (
    <ProgressStepItem
        key={Math.random()}
        status="active"
    >
      <Caption>{'Shipped'}</Caption>
    </ProgressStepItem>
  )
  return (
    <div>
      <Button onClick={() => setWarning(!warning)}>{'Toggle State'}</Button>
      <br />
      <br />
      <br />
      <ProgressStep
          icon
          variant="tracker"
      >
        <ProgressStepItem status="complete">
          <Caption>{'Ordered'}</Caption>
        </ProgressStepItem>
        {showWarning ? WarningIcon : CheckedIcon}
        <ProgressStepItem status="inactive">
          <Caption>{'Delivered'}</Caption>
        </ProgressStepItem>
      </ProgressStep>
    </div>
  )
}

export default ProgressStepTrackerClickEvents

Timeline

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

Skeleton Loading

Default

import React from 'react'

import { SkeletonLoading } from 'playbook-ui'

const SkeletonLoadingDefault = (props) => (
  <div>
    <SkeletonLoading />
  </div>
)

export default SkeletonLoadingDefault

Color

The SkeletonLoading component has a default and a white color variant.

import React from 'react'

import { Card, SkeletonLoading } from 'playbook-ui'

const SkeletonLoadingColor = (props) => (
  <div>
    <Card 
        borderNone
    >
      <SkeletonLoading/>
    </Card>
    <Card 
        background="light" 
        borderNone
    >
      <SkeletonLoading 
          color="white"
      />
    </Card>
  </div>
)

export default SkeletonLoadingColor

Layout

Use the stack and gap props in conjunction to layer multiple Skeleton loading bars on top of each other.

stack accepts a number that correlates to the number of rows (1 is default), and gap accepts a portion of our spacing props (xxs as default, xs, sm, md, lg, xl, xxl) to set the pixel distance between each row. gap will not do anything if there is no corresponding stack prop set.

import React from 'react'

import { SkeletonLoading } from 'playbook-ui'

const SkeletonLoadingLayout = (props) => (
  <div>
    <SkeletonLoading
        stack="5"
    />
    <SkeletonLoading
        gap="md"
        paddingTop="xl"
        stack="3"
    />
  </div>
)

export default SkeletonLoadingLayout

Border Radius

The borderRadius prop accepts all of our BorderRadius tokens, with sm as default.

import React from 'react'

import { Flex, SkeletonLoading } from 'playbook-ui'

const SkeletonLoadingBorderRadius = (props) => (
  <Flex justify="evenly">
    <SkeletonLoading 
        borderRadius="rounded" 
        height="50px" 
        width="100px"
    />
    <SkeletonLoading 
        borderRadius="xl" 
        height="50px" 
        width="100px"
    />
    <SkeletonLoading 
        borderRadius="lg" 
        height="50px" 
        width="100px"
    />
    <SkeletonLoading 
        borderRadius="md" 
        height="50px" 
        width="100px"
    />
    <SkeletonLoading 
        height="50px" 
        width="100px"
    />
    <SkeletonLoading 
        borderRadius="xs" 
        height="50px" 
        width="100px"
    />
    <SkeletonLoading 
        borderRadius="none" 
        height="50px" 
        width="100px"
    />
  </Flex>
)

export default SkeletonLoadingBorderRadius

Height & Width

The height and width props accept pixel and percentage values. If using a percentage for height, the parent container must have a set height.

Set the height and width props to the same value to make a square. A rounded borderRadius will make a square a circle. If using percentages to make a square, your parent container must also be a square.

import React from 'react'

import { SkeletonLoading, Card } from 'playbook-ui'

const SkeletonLoadingHeightWidth = (props) => (
  <div>
    <SkeletonLoading
        height="100px"
        width="50%"
    />
    <SkeletonLoading
        gap="md"
        height="20px"
        marginY="md"
        stack="3"
        width="50px"
    />
    <Card 
        height='200px' 
        marginBottom="md"
        padding="none" 
        width='100%'
    >
      <SkeletonLoading
          borderRadius="md"
          gap="xl"
          height="50%"
          width="300px"
      />
    </Card>
    <Card 
        height='200px'
        padding="none"
        width='100%'
    >
      <SkeletonLoading
          borderRadius="md"
          gap="xl"
          height="30%"
          stack="2"
          width="70%"
      />
    </Card>
    <SkeletonLoading 
        height="150px"
        marginY="md"
        width="150px"
    />
    <SkeletonLoading 
        borderRadius="rounded"
        height="150px"
        width="150px"
    />
  </div>
)

export default SkeletonLoadingHeightWidth

User Component Example

import React, { useState } from 'react';

import { Button, SkeletonLoading, Flex, User } from 'playbook-ui'

const SkeletonLoadingUser = (props) => {
  const [isLoading, setIsLoading] = useState(true)
  const toggleLoading = () => setIsLoading((prev) => !prev)

  return (
    <div>
      <Button 
          marginBottom="md" 
          onClick={toggleLoading} 
          variant="secondary"
      >
          {isLoading ? "Show User" : "Show Skeleton Loading"}
      </Button>
      <div>
        {isLoading ? (
          <Flex alignItems="center">
              <SkeletonLoading 
                  borderRadius="rounded" 
                  height="38px" 
                  paddingRight="sm"
                  width="38px"
              />
                <SkeletonLoading 
                    gap="xxs"
                    height="18px" 
                    stack="2"
                    width="161px"
                />
          </Flex>
        ) : (
          <User
              align="left"
              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
              name="Anna Black"
              orientation="horizontal"
              title="Remodeling Consultant"
          />
        )}
      </div>
      <div>
        {isLoading ? (
          <Flex 
              alignItems="start"
              paddingTop="md"
          >
              <Flex 
                  alignItems="center" 
                  flexDirection="column"
              >
                  <SkeletonLoading 
                      borderRadius="rounded" 
                      height="80px" 
                      paddingBottom="xs" 
                      width="80px"
                  />
                  <SkeletonLoading 
                      height="32px" 
                      paddingBottom="xxs" 
                      width="144px"
                  />
                  <SkeletonLoading 
                      height="21px" 
                      width="164px"
                  />
              </Flex>
          </Flex>
        ) : (
          <Flex
              alignItems="start" 
              paddingTop="md"
          >
              <User
                  align="center"
                  avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
                  name="Anna Black"
                  orientation="vertical"
                  size="lg"
                  title="Remodeling Consultant"
              />
          </Flex>
        )}
      </div>
    </div>
  )
}

export default SkeletonLoadingUser;

Filter Component Example

import React, { useState } from 'react';

import { Button, SkeletonLoading, Card, Filter, Flex, Select, TextInput } from 'playbook-ui'

const SortingChangeCallback = (sortOptions) => {
  alert(JSON.stringify(sortOptions[0]))
}

const SkeletonLoadingFilter = (props) => {
  const [isLoading, setIsLoading] = useState(true)
  const toggleLoading = () => setIsLoading((prev) => !prev)

  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
    { value: 'A galaxy far far away, like really far away...' },
  ]

  return (
    <div>
      <Button 
          marginBottom="md" 
          onClick={toggleLoading} 
          variant="secondary"
      >
          {isLoading ? "Show Filter" : "Show Skeleton Loading"}
      </Button>
      <div>
        {isLoading ? (
          <Card 
              marginBottom="lg"
          >
              <Flex 
                  alignItems="center" 
                  justify="between"
                  orientation="row"
              >
                  <Flex 
                      alignItems="center" 
                      justify="start"
                      orientation="row"
                  >
                      <SkeletonLoading
                          borderRadius="rounded"
                          height="40px"
                          marginRight="sm"
                          width="40px"
                      />
                      <SkeletonLoading 
                          height="16px" 
                          marginRight="md"
                          width="80px"
                      />
                  </Flex>
                  <Flex 
                      alignItems="center" 
                      justify="end"
                      orientation="row"
                  >
                      <SkeletonLoading 
                          height="18px" 
                          width="120px"
                      />
                  </Flex>
              </Flex>
          </Card>
        ) : (
          <Filter
              filters={{ 'Full Name': 'John Wick' }}
              marginBottom="lg" 
              minWidth="375px"
              results={546}
              sortOptions={{
                popularity: 'Popularity',
                // eslint-disable-next-line
                manager_title: 'Manager\'s Title',
                // eslint-disable-next-line
                manager_name: 'Manager\'s Name',
              }}
              sortValue={[{ name: 'popularity', dir: 'desc' }]}
          >
            {({ closePopover }) => (
              <form>
                <TextInput 
                    label="Example Text Field" 
                    placeholder="Enter Text"
                />
                <Select
                    blankSelection="Select One..."
                    label="Example Collection Select"
                    name="Collection Select"
                    options={options}
                />
                <Flex spacing="between">
                    <Button 
                        onClick={closePopover} 
                        text="Filter"
                    />
                    <Button 
                        text="Defaults" 
                        variant="secondary"
                    />
                </Flex>
              </form>
            )}
          </Filter>
        )}
      </div>
      <div>
        {isLoading ? (
          <SkeletonLoading 
              height="127px" 
              marginBottom="lg"
              width="100%"
          />
        ) : (
          <Filter
              double
              filters={{
                'Full Name': 'John Wick',
                'City': 'San Francisco',
              }}
              marginBottom="xl"
              minWidth="375px"
              onSortChange={SortingChangeCallback}
              results={1}
              sortOptions={{
                popularity: 'Popularity',
                // eslint-disable-next-line
                manager_title: 'Manager\'s Title',
                // eslint-disable-next-line
                manager_name: 'Manager\'s Name',
              }}
              sortValue={[{ name: 'popularity', dir: 'desc' }]}
          >
            {({ closePopover }) => (
              <form>
                <TextInput 
                    label="Full Name" 
                    placeholder="Enter name"
                />
                <Select
                    blankSelection="Select One..."
                    label="Territory"
                    maxWidth="sm"
                    name="location"
                    options={options}
                />
                <Flex spacing="between">
                    <Button 
                        onClick={closePopover}
                        text="Filter" 
                    />
                    <Button 
                        text="Defaults"
                        variant="secondary"
                    />
                </Flex>
              </form>
            )}
          </Filter>
        )}
      </div>      
    </div>
  )
}

export default SkeletonLoadingFilter;

State And Progress Indicators

Empty State

Loading Inline

Progress Pills

Progress Simple

Progress Step

Timeline

Skeleton Loading

Contribute to Playbook

Power

Connect