Contact

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

Default


VStack(alignment: .leading, spacing: Spacing.small) {
  PBContact(type: .cell, value: "3491859988")
  PBContact(value: "5555555555")
  PBContact(type: .email, value: "email@example.com")
  PBContact(type: .work, value: "3245627482")
  PBContact(type: .workCell, value: "3245627482")
}

Detail Indicator


VStack(alignment: .leading, spacing: Spacing.small) {
  PBContact(type: .cell, value: "3491859988", detail: true)
  PBContact(value: "5555555555", detail: true)
  PBContact(type: .email, value: "email@example.com", detail: true)
  PBContact(type: .work, value: "3245627482", detail: true)
  PBContact(type: .ext, value: "1234", detail: true)
}

Props

Name	Type	Description	Default	Values
detail	`Bool`	Displays text describing the Contact's type	`false`	`true` `false`
contactValue	`String`	Sets the Contact's text value
type	`ContactType`	Sets the icon	`.home`	`cell` `email` `home` `work` `workCell` `wrongPhone` `ext` `custom`

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

Dribbble

Github

Connect Chat