Newer Version Available

This content describes an older version of this product. View Latest

Setting Attributes on a Component Reference

When you include another component, such as <lightning:button>, in a component, we call that a component reference to <lightning:button>. You can use <aura:set> to set an attribute on the component reference. For example, if your component includes a reference to <lightning:button>:

1<lightning:button label="Save">
2    <aura:set attribute="variant" value="brand"/>
3</lightning:button>

This is equivalent to:

1<lightning:button label="Save" variant="brand" />

The latter syntax without aura:set makes more sense in this simple example. You can also use this simpler syntax in component references to set values for attributes that are inherited from parent components.

aura:set is more useful when you want to set markup as the attribute value. For example, this sample specifies the markup for the else attribute in the aura:if tag.

1<aura:component>
2    <aura:attribute name="display" type="Boolean" default="true"/>
3    <aura:if isTrue="{!v.display}">
4        Show this if condition is true
5        <aura:set attribute="else">
6           <lightning:button label="Save" onclick="{!c.saveRecord}" />
7        </aura:set>
8    </aura:if>
9</aura:component>