Formatted Phone

lightning:formattedPhone

Displays a phone number as a hyperlink with the tel: URL scheme. This component requires API version 41.0 and later.

For Aura components only. For LWC development, use lightning-formatted-phone.

For Use In

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

A lightning:formattedPhone component displays a read-only representation of a phone number as a hyperlink using the tel: URL scheme. Clicking the phone number opens the default VOIP call application on a desktop. On mobile devices, clicking the phone number calls the number.

If your locale is set to English (United States) or English (Canada), a phone number with 10 or 11 digits that starts with 1 is displayed in the format (999) 999-9999.

Include a ”+” sign before the number to display the number in the format +19999999999 instead.

Here are two ways to display (425) 555-0155 as a hyperlink.

1<aura:component>
2  <p><lightning:formattedPhone value="4255550155"></lightning:formattedPhone></p>
3  <p><lightning:formattedPhone value="14255550155"></lightning:formattedPhone></p>
4</aura:component>

The previous example renders the following HTML.

1<a href="tel:4255550155">(425) 555-0155</a> <a href="tel:14255550155">(425) 555-0155</a>

Here’s how to prevent the US/Canada formatting and display the number with a + prefix, even when your locale is set to one of these locales.

1<aura:component>
2  <p><lightning:formattedPhone value="+14255550155"></lightning:formattedPhone></p>
3</aura:component>

The previous example renders the following HTML.

1<a href="tel:+14255550155">+14255550155</a>

To display the phone number in plain text without a hyperlink, set disabled to true. Disabling the phone number also prevents setting focus on the phone number using the Tab key.

1<lightning:formattedPhone value="18005551212" disabled="true" />

Attributes

Name	Description	Type
body	The body of the component. In markup, this is everything in the body of the tag.	Aura.Component[]
class	A CSS class for the outer element, in addition to the component's base classes.	String
disabled	Displays the phone number as plain text instead of a link. The number cannot be clicked or receive focus.	Boolean
onclick	The action triggered when the phone number is clicked.	Aura.Action
title	Displays tooltip text when the mouse moves over the element.	String
value	Sets the phone number to display.	Integer

Formatted Phone

Attributes

Lightning Component Reference