[SalesForce] How to change label of button in lightning experience

How can I change the label of a button in Lightning? When I click on the button I want the label text to change from the controller if the Button ID is dynamically bind.

component code

<aura:component controller="Suppliers_Light" implements="force:appHostable">
  <aura:attribute Name="UTList" type="Account"/>   
  <ui:button class="btn btn-primary mb10 addtarget seemore" 
    label="Add to Target List" aura:id="{UTList.Id}" press="{!c.c_UpdateUserTargetList}" />
</aura:component>

//here is my controller code//

action.setCallback(this, function(a) { 

            //var id=component.get("v.UTList.Id");
            if (a.getState() === "SUCCESS") {
              **//change button label here//**
            } else if (a.getState() === "ERROR") {
                debugger;
                $A.log("Errors", a.getError());
            }
        });

i need to change label of button here.

Best Answer

This code will change the label of the clicked button.

c_UpdateUserTargetList : function(component, event, helper){
    action.setCallback(this, function(a) { 
        //var id=component.get("v.UTList.Id");
        if (a.getState() === "SUCCESS") {
            **//change button label here//**
            var source=event.getSource();
            source.set('v.label','New Label');
        } else if (a.getState() === "ERROR") {
            debugger;
            $A.log("Errors", a.getError());
        }
    });
}

How does it work?

There are two pieces to make this work.

The first is event. event contains the source element that fired the controller function. You can use this to get information about the button, and also update it.

var source=event.getSource();

The second piece sets the label.

source.set('v.label','New Label');

Note

I put these on two lines to show the two separate parts. If I was putting this in production I would put it on one line.

event.getSource().set('v.label','New Label')
Related Topic