2

On click of a button Iwant ot toggle the IconName in lightning:buttonIcon tag in Lightning component. I want to toggle the iconName from utility:success to utility:error, is there any way to do it?

Here is my lightning:buttonIcon with iconName

<lightning:buttonIcon iconName="utility:success" size="small" />

2 Answers 2

8

You just use a normal attribute, and toggle it as you need to. Self-contained example follows:

<aura:application extends="force:slds">
    <aura:attribute name="icon" type="String" default="utility:success" />
    <lightning:buttonIcon iconName="{!v.icon}" title="Default" alternativeText="Default"
                          onclick="{!c.click}" />
</aura:application>

({
    click: function(component, event, helper) {
        component.set("v.icon",
                      component.get("v.icon")=="utility:success"?
                      "utility:error":"utility:success");
    }
})
2
  • you are just awesome, didn't thought this approach, thanks allot. Aug 1, 2017 at 15:18
  • @AbhiTripathi No problem, glad I could help!
    – sfdcfox
    Aug 1, 2017 at 15:20
2

Alternative solution where you can set any component value using javascript:

<aura:application extends="force:slds" >
<lightning:buttonIcon aura:id="firstButton" iconName="utility:success" title="Default" alternativeText="Default"/>

<lightning:button label="Toggle Icon" onclick="{!c.toggleIcon}" />

JS

({
    toggleIcon: function(component, event, helper) {

        component.find("firstButton").set("v.iconName",'utility:error');
    }
})
1
  • I'm not sure how this addresses the question of how to toggle a button's icon. Toggle implies a continual change of state based on the user clicking something. If I am reading your example correctly, there's just a one-way state change from "success" to "error", not a true toggle. Jan 1, 2018 at 14:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.