Playbook Design System

Contact

Default

The Contact kit automatically formats US phone numbers when the contactType / contact_type is one of: home (default), work, cell, work-cell, wrong-phone.

Use email to display emails.
Use international to display International phone numbers exactly as provided (no formatting applied).
Use extension to display four digit phone extensions.

import React from 'react'

import { Contact } from 'playbook-ui'

const ContactDefault = (props) => {
  return (
    <div>
      <Contact
          contactType="cell"
          contactValue="349-185-9988"
      />
      <Contact
          contactValue="5555555555"
      />
      <Contact
          contactType="email"
          contactValue="email@example.com"
      />
      <Contact
          contactType="work"
          contactValue="3245627482"
      />
      <Contact
          contactType="work-cell"
          contactValue="3245627482"
      />
      <Contact
          contactType="wrong-phone"
          contactValue="2124396666"
      />
      <Contact
          contactType='extension'
          contactValue="1234"
      />
      <Contact
          contactType="international"
          contactValue="+44 7700 900461"
      />
    </div>
  )
}

export default ContactDefault

Detail Indicator

import React from 'react'

import { Contact } from 'playbook-ui'

const ContactDefault = (props) => {
  return (
    <div>
      <Contact
          contactDetail="Cell"
          contactType="cell"
          contactValue="349-185-9988"
      />
      <Contact
          contactDetail="Home"
          contactValue="5555555555"
      />
      <Contact
          contactDetail="Work"
          contactType="work"
          contactValue="3245627482"
      />
      <Contact
          contactDetail="Work-Cell"
          contactType="work-cell"
          contactValue="3245627482"
      />
      <Contact
          contactDetail="Ext"
          contactType='extension'
          contactValue="1234"
      />
      <Contact
          contactDetail="International"
          contactType="international"
          contactValue="+44 7700 900461"
      />
    </div>
  )
}

export default ContactDefault

Unstyled

Use the Contact kit with iconEnabled={false} and unstyled to display phone numbers with full typography control. With unstyled, the Contact kit renders just the formatted text without a Body wrapper, allowing you to wrap it in your own Typography kit to control the color and styling.

import React from 'react'

import { Contact, Body } from 'playbook-ui'

const ContactUnstyled = (props) => {
  return (
    <div>
      <Body color="default">
        <Contact
            contactValue="2125551234"
            iconEnabled={false}
            unstyled
        />
      </Body>
      <Body color="light">
        <Contact
            contactValue="12125551234"
            iconEnabled={false}
            unstyled
        />
      </Body>
      <Body color="lighter">
        <Contact
            contactValue="4155551234"
            iconEnabled={false}
            unstyled
        />
      </Body>
      <Body color="default">
        <Contact
            contactType="extension"
            contactValue="1234"
            iconEnabled={false}
            unstyled
        />
      </Body>
    </div>
  )
}

export default ContactUnstyled

Currency

Variants

NOTE: The value passed into the amount prop can be either a string or numeric value.

import React from 'react'

import { Currency } from 'playbook-ui'

const CurrencyVariants = (props) => {
  return (
    <>
      <Currency
          amount="30,327.43"
          label="Default"
          marginBottom="md"
          size="sm"
      />
      <Currency
          amount="2,000.50"
          emphasized={false}
          label="Emphasized False"
          marginBottom="md"
          size="sm"
      />
      <Currency
          amount={342}
          label="Light"
          marginBottom="md"
          size="sm"
          symbol="€"
          variant="light"
      />
      <Currency
          amount="45"
          label="Bold"
          size="sm"
          unit="/mo"
          variant="bold"
      />
    </>
  )
}

export default CurrencyVariants

Size

import React from 'react'

import { Currency } from 'playbook-ui'

const CurrencySize = (props) => {
  return (
    <>
      <Currency
          amount="2,000.50"
          label="Small"
          marginBottom="md"
          size="sm"
      />
      <Currency
          amount="342"
          label="Medium"
          marginBottom="md"
          size="md"
          symbol="€"
      />
      <Currency
          amount="45"
          label="Large"
          size="lg"
          unit="/mo"
      />
    </>
  )
}

export default CurrencySize

Alignment

import React from 'react'

import { Currency } from 'playbook-ui'

const CurrencyAlignment = (props) => {
  return (
    <>
      <Currency
          amount="2,000.50"
          label="Left"
          size="sm"
      />
      <Currency
          align="center"
          amount="342"
          label="Center"
          size="sm"
          symbol="€"
      />
      <Currency
          align="right"
          amount="45"
          label="Right"
          size="sm"
          unit="/mo"
      />
    </>
  )
}

export default CurrencyAlignment

No Symbol

Remove the "$" symbol by setting an empty string: symbol="".

import React from 'react'

import { Currency } from 'playbook-ui'

const CurrencyNoSymbol = (props) => {
  return (
    <Currency
        amount="309"
        label="Sales"
        size="md"
        symbol=""
        unit="/week"
    />
  )
}

export default CurrencyNoSymbol

Abbreviate Larger Amounts

Abbreviate larger amounts into thousands (K), millions (M), billions (B), and even trillions (T).

import React from 'react'

import { Currency } from 'playbook-ui'

const CurrencyAbbreviated = (props) => {
  return (
    <>
      <Currency
          abbreviate
          amount="2,500"
          label="Thousands (with Unit)"
          marginBottom="md"
          size="md"
          unit="/mo"
      />
      <Currency
          abbreviate
          amount="45300000"
          label="Millions"
          marginBottom="md"
          size="md"
      />
      <Currency
          abbreviate
          amount="6,700,000,000"
          label="Billions"
          marginBottom="md"
          size="md"
      />
      <Currency
          abbreviate
          amount="9,900,000,000,000"
          label="Trillions"
          size="md"
      />
    </>
  )
}

export default CurrencyAbbreviated

Matching Decimals

Use decimals="matching" when you want the full decimal amount displayed as a single number rather than split visually.

import React from 'react'

import { Currency } from 'playbook-ui'

const CurrencyMatchingDecimals = (props) => {
  return (
    <>
      <Currency
          amount="372.12"
          decimals="matching"
          label="Small"
          marginBottom="md"
          size="sm"
          unit="/day"
      />
      <Currency
          amount="30,327.43"
          decimals="matching"
          label="Medium"
          marginBottom="md"
          size="md"
          symbol="€"
      />
      <Currency
          amount="621,953.99"
          decimals="matching"
          label="Large"
          size="lg"
      />
    </>
  )
}

export default CurrencyMatchingDecimals

Unstyled

For alternative typography styles, you can pass a boolean prop called unstyled to the Currency kit and wrap it in any of our typography kits (Title, Body, Caption, etc.). This will allow the Currency kit to inherit any of our typography styles.

import React from 'react'

import { Currency, Title } from 'playbook-ui'

const CurrencyUnstyled = (props) => {
  return (
    <>
      <Currency
          amount="2,000.50"
          label="Basic unstyled example"
          marginBottom="md"
          unstyled
      />

      <Title
          size={1}
      >
        <Currency
            amount="2,000.50"
            label="Example with wrapping typography kit"
            unstyled
        />
      </Title>
    </>
  )
}

export default CurrencyUnstyled

Comma Separator

The optional commaSeparator can be used to auto-format the use of commas as a thousands separator.

NOTE: If the value passed into the amount prop is already comma-dilineated, it will not add additional commas.

import React from "react"

import { Currency } from 'playbook-ui'

const CurrencyCommaSeparator = (props) => {
  return (
    <Currency
        amount='1234567.89'
        commaSeparator
        decimals="matching"
        emphasized={false}
        size="lg"
    />
  )
}

export default CurrencyCommaSeparator

Negative

Small Currency kits have the negative sign on the lefthand side of the "$" symbol.

import React from 'react'

import { Currency } from 'playbook-ui'

const CurrencyNegative = (props) => {
  return (
    <>
      <Currency
          amount="-2,000.50"
      />
      <Currency
          amount="-2,000.50"
          size="md"
      />
      <Currency
          amount="-2,000.50"
          size="lg"
      />
    </>
  )
}

export default CurrencyNegative

Null Display

To customize how the amount field appears when it is empty, use the nullDisplay prop and set it to the desired value you want to display.

import React from 'react'

import { Currency } from 'playbook-ui'

const CurrencyNullDisplay = (props) => {
  return (
    <>
      <Currency
          amount=""
          label="Null"
          marginBottom="md"
          nullDisplay="--"
      />

      <Currency
          amount=""
          label="Null"
          marginBottom="md"
          nullDisplay="$0.00"
      />
    
      <Currency
          amount=""
          label="Null"
          marginBottom="md"
          nullDisplay=" "
      />
    </>
  )
}

export default CurrencyNullDisplay

Home Address Street

Default

Use this kit on tables, card displays, or on modals. It's versatile for displaying in the most condensed areas.

import React from 'react'

import { HomeAddressStreet } from 'playbook-ui'

const HomeAddressStreetDefault = (props) => {
  return (
    <HomeAddressStreet
        address="70 Prospect Ave"
        addressCont="Apt M18"
        city="West Chester"
        homeId="8250263"
        homeUrl="https://powerhrg.com/"
        houseStyle="Colonial"
        state="PA"
        territory="PHL"
        zipcode="19382"
    />
  )
}

export default HomeAddressStreetDefault

Emphasis

Emphasis on street happens by default. (no prop needed)
Emphasis on "city" makes the city emphasized, rather than the street.
Adding "none" to emphasis prop will provide no emphasis.

import React from 'react'

import { HomeAddressStreet } from 'playbook-ui'

const HomeAddressStreetEmphasis = (props) => {
  return (
    <div>
      <HomeAddressStreet
          address="70 Prospect Ave"
          addressCont="Apt M18"
          city="West Chester"
          homeId="8250263"
          homeUrl="https://powerhrg.com/"
          houseStyle="Colonial"
          state="PA"
          territory="PHL"
          zipcode="19382"
      />
      <br />
      <br />
      <HomeAddressStreet
          address="70 Prospect Ave"
          addressCont="Apt M18"
          city="West Chester"
          emphasis="city"
          homeId="8250263"
          homeUrl="https://powerhrg.com/"
          houseStyle="Colonial"
          state="PA"
          territory="PHL"
          zipcode="19382"
      />
      <br />
      <br />
      <HomeAddressStreet
          address="70 Prospect Ave"
          addressCont="Apt M18"
          city="West Chester"
          emphasis="none"
          homeId="8250263"
          homeUrl="https://powerhrg.com/"
          houseStyle="Colonial"
          state="PA"
          territory="PHL"
          zipcode="19382"
      />
    </div>
  )
}

export default HomeAddressStreetEmphasis

Modified

import React from 'react'

import { HomeAddressStreet } from 'playbook-ui'

const HomeAddressStreetModified = (props) => {
  return (
    <HomeAddressStreet
        address="70 Prospect Ave"
        city="West Chester"
        state="PA"
        territory="PHL"
        zipcode="19382"
    />
  )
}

export default HomeAddressStreetModified

Link

Use the target prop to control whether the link opens on the same or a new tab (same page is the default behavior). You can use any web/standard values or a custom string to specify your link target.

import React from 'react'

import { HomeAddressStreet } from 'playbook-ui'

const HomeAddressStreetLink= (props) => {
  return (
    <HomeAddressStreet
        address="70 Prospect Ave"
        addressCont="Apt M18"
        city="West Chester"
        homeId={8250263}
        homeUrl="https://powerhrg.com/"
        houseStyle="Colonial"
        state="PA"
        target="_blank"
        territory="PHL"
        zipcode="19382"
    />
  )
}

export default HomeAddressStreetLink

Formatting

The state prop will always capitalize the state name, even if the data entered is in lowercase. For example, when state="pa" is passed, it will be rendered as "PA". When you pass preserveCase, the street address will be rendered exactly as entered, without automatic title capitalization.

import React from 'react'

import { HomeAddressStreet } from 'playbook-ui'

const HomeAddressStreetFormatting = (props) => {
  return (
    <HomeAddressStreet
        address="70 pRoSpEcT ave"
        addressCont="Apt M18"
        city="West Chester"
        homeId="8250263"
        homeUrl="https://powerhrg.com/"
        preserveCase
        state="pa"
        territory="PHL"
        zipcode="19382"
    />
  )
}

export default HomeAddressStreetFormatting

Label Pill

Default

Use this kit to display a label and a value with a certain status or color to highlight its significance or meaning. It can be a good design use to highlight the value incase it is important.

import React from 'react'

import { LabelPill } from 'playbook-ui'

const LabelPillDefault = (props) => (

  <>
    <LabelPill
        label="Service Needed"
        pillValue="76"
    />

    <LabelPill
        label="Waiting"
        pillValue="69"
        variant="success"
    />

    <LabelPill
        label="In Service"
        pillValue="28"
        variant="error"
    />

    <LabelPill
        label="Fully Serviced"
        pillValue="101"
        variant="warning"
    />

    <LabelPill
        label="Inbox"
        pillValue="197"
        variant="info"
    />

    <LabelPill
        label="Outbox"
        pillValue="13"
        variant="neutral"
    />

    <LabelPill
        label="Inbox"
        pillValue="218"
        variant="primary"
    />
  </>
)

export default LabelPillDefault

Label Value

Default

Use this kit to display a label and value text for almost every data entry.

import React from 'react'

import { LabelValue } from 'playbook-ui'

const LabelValueDefault = (props) => {
  return (
    <div>
      <LabelValue
          label="Role"
          value="Administrator, Moderator"
      />

      <br />

      <LabelValue
          label="Email"
          value="anna.black@powerhrg.com"
      />

      <br />

      <LabelValue
          label="Bio"
          value="Proin pulvinar feugiat massa in luctus. Donec urna nulla,
            elementum sit amet tincidunt nec, mattis nec urna. Cras viverra
            lorem odio, id pretium dui interdum ut. Nullam dignissim nisl vitae
            orci vehicula condimentum"
      />
    </div>
  )
}

export default LabelValueDefault

Details

Variant details can pass icon, description, title, date, and active props.

import React from 'react'

import { LabelValue } from 'playbook-ui'

const LabelValueDetails = (props) => {
  return (
    <div>
      <LabelValue
          icon="truck"
          label="Installer"
          title="JD Installations LLC"
          variant="details"
      />

      <br />

      <LabelValue
          description="33-12345"
          icon="home"
          label="Project"
          title="Jefferson-Smith"
          variant="details"
      />

      <br />

      <LabelValue
          date={new Date('18 Nov 2019')}
          description="33-12345"
          icon="home"
          label="Project"
          title="Jefferson-Smith"
          variant="details"
      />

      <br />

      <LabelValue
          active
          date={new Date('18 Nov 2019')}
          description="33-12345"
          icon="home"
          label="Project"
          title="Jefferson-Smith"
          variant="details"
      />
    </div>
  )
}

export default LabelValueDetails

Other Examples

import React from 'react'

import { Flex, LabelValue, Title } from 'playbook-ui'

const LabelValueDetailsExamples = (props) => {
  return (
    <div>
      <Title
          marginBottom="sm"
          size={4}
          text="Patient Profile"
      />

      <Flex>
        <Flex
            marginRight="lg"
            orientation="column"
        >
          <LabelValue
              icon="user"
              label="Age"
              paddingBottom="sm"
              title="24 yrs old"
              variant="details"
          />
          <LabelValue
              icon="weight"
              label="Weight"
              title="91 kg"
              variant="details"
          />
        </Flex>
        <Flex
            orientation="column"
        >
          <LabelValue
              icon="tint"
              label="Blood"
              paddingBottom="sm"
              title="A +"
              variant="details"
          />
          <LabelValue
              icon="arrows-v"
              label="Height"
              title="187 cm"
              variant="details"
          />
        </Flex>
      </Flex>

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

      <Title
          marginBottom="sm"
          size={4}
          text="Workout Schedule"
      />

      <LabelValue
          active
          description="6 sets • 8 reps • 40-100 kg"
          icon="dumbbell"
          label="Chest"
          paddingBottom="sm"
          title="Bench Press"
          variant="details"
      />
      <LabelValue
          active
          description="5 sets • 12 reps • 20-40 kg"
          icon="dumbbell"
          label="Biceps"
          paddingBottom="sm"
          title="Barbell Curl"
          variant="details"
      />
      <LabelValue
          active
          description="8 sets • 8 reps • 40-120 kg"
          icon="dumbbell"
          label="Back"
          paddingBottom="sm"
          title="Back Squat"
          variant="details"
      />
    </div>
  )
}

export default LabelValueDetailsExamples

Person

Default

Use this kit to display users, homeowners, or person of contact.

import React from 'react'

import { Person } from 'playbook-ui'

const PersonDefault = (props) => {
  return (
    <Person
        firstName="Kyle"
        lastName="Fadigan"
    />
  )
}

export default PersonDefault

Person Contact

Default

import React from 'react'

import { PersonContact } from 'playbook-ui'

const PersonContactDefault = (props) => {
  return (
    <div>
      <PersonContact
          contacts={[
          {
            contactType: 'email',
            contactValue: 'email@example.com',
          },
          {
            contactValue: '5555555555',
          },
          {
            contactType: 'work',
            contactValue: '3245627482',
          },
        ]}
          firstName="Pauline"
          lastName="Smith"
      />
    </div>
  )
}

export default PersonContactDefault

Multiple People

import React from 'react'

import { PersonContact } from 'playbook-ui'

const PersonContactMultiple = (props) => {
  return (
    <div>
      <PersonContact
          contacts={[
          {
            contactType: 'email',
            contactValue: 'email@example.com',
          },
          {
            contactValue: '5555555555',
          },
          {
            contactType: 'work',
            contactValue: '3245627482',
          },
        ]}
          firstName="Harvey"
          lastName="Walters"
      />
      <PersonContact
          contacts={[
          {
            contactValue: '5555555555',
          },
        ]}
          firstName="Brenda"
          lastName="Walters"
      />
    </div>
  )
}

export default PersonContactMultiple

With Detail

import React from 'react'

import { PersonContact } from 'playbook-ui'

const PersonContactWithDetail = (props) => {
  return (
    <div>
      <PersonContact
          contacts={[
          {
            contactType: 'email',
            contactValue: 'email@example.com',
          },
          {
            contactValue: '5555555555',
            contactDetail: 'Home',
          },
          {
            contactType: 'work',
            contactValue: '3245627482',
            contactDetail: 'Work',
          },
        ]}
          firstName="Harvey"
          lastName="Walters"
      />
    </div>
  )
}

export default PersonContactWithDetail

With Wrong Numbers

import React from 'react'

import { PersonContact } from 'playbook-ui'

const PersonContactWithWrongNumbers = (props) => {
  return (
    <>
      <PersonContact
          contacts={[
            {
              contactType: 'email',
              contactValue: 'email@example.com',
            },
            {
              contactValue: '5555555555',
            },
            {
              contactType: 'wrong-phone',
              contactValue: '3245627482',
            },
            {
              contactType: 'phone',
              contactValue: '3048615385',
            },
          ]}
          firstName="Pauline"
          key="person-contact-1"
          lastName="Smith"
      />
    </>
  )
}

export default PersonContactWithWrongNumbers

Source

Default

import React from 'react'

import { Source } from 'playbook-ui'

const SourceDefault = (props) => (
  <>
    <Source
        source="BJ's Johnston-208"
        type="retail"
    />

    <br />
    <br />

    <Source
        source="Referral-phrg"
        type="inbound"
    />

    <br />
    <br />

    <Source
        source="BJ's Future CB"
        type="user"
        user={
              { name: 'Anna Black',
                image: {
                  url: 'https://randomuser.me/api/portraits/women/44.jpg',
                },
                userId: '48582',
              }
            }
    />
  </>
)

export default SourceDefault

Hide Icon

import React from 'react'

import { Source } from 'playbook-ui'

const SourceNoicon = (props) => (
  <>
    <Source
        hideIcon
        source="BJ's Johnston-208"
        type="retail"
    />

    <br />
    <br />

    <Source
        hideIcon
        source="Referral-phrg"
        type="inbound"
    />

    <br />
    <br />

    <Source
        hideIcon
        source="BJ's Future CB"
        type="user"
        user={
              { name: 'Anna Black',
                image: {
                  url: 'https://randomuser.me/api/portraits/women/44.jpg',
                  },
                userId: '48582',
                }
              }
    />
  </>
)

export default SourceNoicon

Source Types

import React from 'react'

import { Source } from 'playbook-ui'

const SourceTypes = (props) => (
  <>
    <Source
        source="BJ's Johnston-208"
        type="retail"
    />

    <br />
    <br />

    <Source
        source="Referral-phrg"
        type="inbound"
    />

    <br />
    <br />

    <Source
        source="B.B.B. Outbound"
        type="outbound"
    />

    <br />
    <br />

    <Source
        source="Contractor.com"
        type="prospecting"
    />

    <br />
    <br />

    <Source
        source="Beards, Beers and Brats"
        type="events"
    />

    <br />
    <br />

    <Source
        source="BJ's Johnston-208"
        type="referral"
    />

    <br />
    <br />

    <Source
        source="Employee Referral"
        type="referral"
        user={
              { name: 'Anna Black',
                image: {
                  url: 'https://randomuser.me/api/portraits/women/44.jpg',
                },
                userId: '48582',
              }
            }
    />

    <br />
    <br />

    <Source
        source="BJ's Future CB"
        type="user"
        user={
              { name: 'Anna Black',
                image: {
                  url: 'https://randomuser.me/api/portraits/women/44.jpg',
                },
                userId: '48582',
              }
            }
    />
  </>
)

export default SourceTypes

Dashboard Value

Full Example

import React from 'react'

import { DashboardValue } from 'playbook-ui'

const DashboardValueDefault = (props) => {
  return (
    <div>
      <DashboardValue
          statChange={{ change: 'decrease', value: '26.1' }}
          statLabel="Decreased Value"
          statValue={{ value: '1,428', unit: 'appts' }}
      />

      <br />
      <br />

      <DashboardValue
          statChange={{ change: 'increase', value: 56.1 }}
          statLabel="Increased Value"
          statValue={{ value: '938', unit: 'homes' }}
      />

      <br />
      <br />

      <DashboardValue
          statChange={{ value: 86 }}
          statLabel="Neutral Value"
          statValue={{ value: '261', unit: 'windows' }}
      />

      <br />
      <br />

      <DashboardValue
          statLabel="Pitch Rate"
          statValue={{ value: '90.9', unit: '%' }}
      />
    </div>
  )
}

export default DashboardValueDefault

Align

import React from 'react'

import { DashboardValue } from 'playbook-ui'

const DashboardValueAlign = (props) => {
  return (
    <div>
      <DashboardValue
          statChange={{ change: 'decrease', value: '26.1' }}
          statLabel="Top Title Value"
          statValue={{ value: '1,428', unit: 'appts' }}
      />

      <br />
      <br />

      <DashboardValue
          align="center"
          statChange={{ change: 'decrease', value: 56.1 }}
          statLabel="Top Title Value"
          statValue={{ value: '1,428', unit: 'appts' }}
      />

      <br />
      <br />

      <DashboardValue
          align="right"
          statChange={{ change: 'decrease', value: 86 }}
          statLabel="Top Title Value"
          statValue={{ value: '1,428', unit: 'appts' }}
      />
    </div>
  )
}

export default DashboardValueAlign

Stat Change

Default

import React from 'react'

import { StatChange } from 'playbook-ui'

const StatChangeDefault = (props) => {
  return (
    <div>
      <StatChange
          change="increase"
          value="28.4"
      />

      <br />

      <StatChange
          change="decrease"
          value={6.1}
      />

      <br />

      <StatChange
          change="neutral"
          value={102}
      />
    </div>
  )
}

export default StatChangeDefault

Icon

import React from 'react'

import { StatChange } from 'playbook-ui'

const StatChangeUnit = (props) => {
  return (
    <div>
      <StatChange
          icon="chart-line"
          value="28.4"
      />

      <br />

      <StatChange
          icon="chart-line-down"
          value={6.1}
      />

      <br />

      <StatChange
          value={102}
      />
    </div>
  )
}

export default StatChangeUnit

Colors

Increase colors your icon GREEN & Decrease colors your icon RED.

import React from 'react'

import { StatChange } from 'playbook-ui'

const StatChangeUnitTwo = (props) => {
  return (
    <div>
      <StatChange
          change="increase"
          icon="level-up"
          value="28.4"
      />

      <br />

      <StatChange
          change="decrease"
          icon="level-down"
          value={6.1}
      />

      <br />

      <StatChange
          change="neutral"
          value={102}
      />
    </div>
  )
}

export default StatChangeUnitTwo

Stat Value

Default

Use this as value for displaying number data at a high level. It’s primary function is to create hierarchy of data within a view.

import React from 'react'

import { StatValue } from 'playbook-ui'

const StatValueDefault = (props) => {
  return (
    <>
      <StatValue
          value={1048}
      />
      <br />
      <br />
      <StatValue
          value={10.48}
      />
    </>
  )
}

export default StatValueDefault

Unit Value

import React from 'react'

import { StatValue } from 'playbook-ui'

const StatValueUnit = (props) => {
  return (
    <StatValue
        unit="appt"
        value="5,294"
    />
  )
}

export default StatValueUnit

Title Count

Default

Use this kit as a form of label value only for a numeric value.

import React from 'react'

import { TitleCount } from 'playbook-ui'

const TitleCountDefault = (props) => {
  return (
    <>
      <TitleCount
          count={35.78}
          title="Appointments"
      />

      <br />

      <TitleCount
          count={7399}
          size="lg"
          title="Appointments"
      />

      <br />

      <TitleCount
          count={-379503.372}
          size="lg"
          title="Appointments"
      />
    </>
  )
}

export default TitleCountDefault

Align

import React from 'react'

import { TitleCount } from 'playbook-ui'

const TitleCountAlign = (props) => {
  return (
    <>
      <TitleCount
          count={527}
          title="Remodeling Consultants"
      />

      <br />

      <TitleCount
          align="center"
          count={527}
          title="Remodeling Consultants"
      />

      <br />

      <TitleCount
          align="right"
          count={527}
          title="Remodeling Consultants"
      />
    </>
  )
}

export default TitleCountAlign

Title Detail

Default

Use this kit in tables and cards to display data that doesn’t have a caption assigned.

import React from 'react'

import { TitleDetail } from 'playbook-ui'

const TitleDetailDefault = (props) => (
  <div>
    <TitleDetail
        detail="Commits data and history"
        title="Email Notifications"
    />

    <TitleDetail
        align="center"
        detail="Commits data and history"
        title="Email Notifications"
    />

    <TitleDetail
        align="right"
        detail="Commits data and history"
        title="Email Notifications"
    />

  </div>
)

export default TitleDetailDefault

Form And Dashboard Text Patterns

Contact

Currency

Home Address Street

Label Pill

Label Value

Person

Person Contact

Source

Dashboard Value

Stat Change

Stat Value

Title Count

Title Detail

Contribute to Playbook

Power

Connect