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

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