Setting Attributes on a Component Reference

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

1<ui:button label="Save">
2    <aura:set attribute="buttonTitle" value="Click to save the record"/>
3</ui:button>

This is equivalent to:

1<ui:button label="Save" buttonTitle="Click to save the record" />

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           <ui:button label="Save" press="{!c.saveRecord}" />
7        </aura:set>
8    </aura:if>
9</aura:component>