Contact

Use to display customer's or user's contact information.

Summary

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

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Github

Connect Chat