A lightning:formattedUrl component displays a read-only representation of a URL as a hyperlink with an href attribute. The link can be a relative or absolute URL. Absolute URLs use protocols such as http://, https://, and ftp://. This component renders an anchor link with the absolute URL as the href value and the label as the displayed text. If no label is provided, the absolute url is used as the displayed text. Clicking the URL takes you to the URL in the same window as it was clicked.
An absolute URL displays using the http:// protocol by default.
<aura:component> <lightning:formattedUrl value="www.salesforce.com" /> </aura:component>
The previous example renders the following HTML.
<a href="http://www.salesforce.com">http://www.salesforce.com</a>
A relative URL navigates to a path within the current site you're on.
<aura:component> <!-- Resolves to http://current-domain/my/path --> <lightning:formattedUrl value="/my/path" /> </aura:component>
Usage Considerations
Use the target attribute to change where the link should open. If you don't provide a target, the hyperlink renders without the href attribute. Supported target values are:
Attribute Name | Attribute type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
title | String | Displays tooltip text when the mouse moves over the element. | |
value | String | The URL to be formatted. | |
target | String | Specifies where to open the link. Options include _blank, _parent, _self, and _top. | |
label | String | The text to display in the link. | |
tooltip | String | The text to display when the mouse hovers over the link. | |
onclick | Action | The action triggered when the URL is clicked. |