| Name | Description | Default | Type |
|---|---|---|---|
className | Additional CSS classes. | | string |
displayText | The text to be displayed. | | string |
formattingOptions | Options to define formatting. | | { showCountryCode: boolean;} |
ref | Ref for the wrapping element. | | Ref<HTMLAnchorElement |HTMLSpanElement> |
value | Phone number, no 'tel:' scheme, '+18887342669' | | string |
variant | Controls styling of the field. | "link" | 'link' |'text' |
PhoneDisplay
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
The PhoneDisplay component renders a phone number as either a Link that will open a user's preferred telecommunication application, or as plain Text.
Usage
The value passed to the PhoneDisplay component should be a formatted phone number in order to guarantee flawless intergration if a user were to click on the PhoneDisplay when it's set as a link variant.
If no displayText is provided, the display will default to the value given. The component displays "--" in the case of an undefined value. If the showCountryCode prop is passed, the country code will display along with the value.