ui:outputURL

A ui:outputURL component represents a URL that is wrapped in an HTML a tag. We recommend using lightning:formattedUrl instead of ui:outputURL.

ui:outputURL can be used with ui:inputURL, which takes in a URL input. To apply Lightning Design System styling, we recommend that you use lightning:input with type="url" instead of ui:inputURL.

To display a URL, you can use an attribute value and bind it to the ui:outputURL component.

1<aura:attribute name="myURL" type="String" default="http://www.google.com"/>
2<ui:outputURL value="{!v.myURL}" label="Search"/>

The previous example renders the following HTML.

1<a href="http://www.google.com" class="uiOutputURL">Search</a>

This example shows how you can bind data from a ui:inputURL component.

1<aura:component>
2    <ui:inputURL aura:id="url" label="Venue URL" class="field" value="http://www.myURL.com"/>
3    <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 
4 <div aura:id="msg" class="hide">
5  You entered: <ui:outputURL aura:id="oURL" value=""/>
6 </div>
7</aura:component>

1({
2    setOutput : function(component, event, helper) {
3    	var cmpMsg = component.find("msg");
4    	$A.util.removeClass(cmpMsg, 'hide');
5    	
6        var url = component.find("url").get("v.value");
7        var oURL = component.find("oURL");
8        oURL.set("v.value", url);
9        oURL.set("v.label", url);
10    }
11})

Attributes

Events