How to disable a lightning:button in Lightning Component

There are a couple of ways to disable the standard <lightning:button />component that is provided by Salesforce. Picking the best way to achieve this will depend on what you are doing, so let’s explore the different ways.

Disabling by default

If you want a button to be disabled by default, the best way to do this is via component attributes using markup.

button.cmp

<aura:component>
  <lightning:button label="example"
                    onclick="{!c.buttonAction}"
                    disabled="true"/>
</aura:component>

Disabling after event with Javascript

In many cases you’ll want to disable the button after it is clicked. You can do that using the event argument passed to controllers.

button.cmp

<aura:component>
  <lightning:button label="example"
                    onclick="{!c.buttonAction}"/>
</aura:component>

buttonController.js

({
  buttonAction: function(component,event,helper){
    let button = event.getSource();
    button.set('v.disabled',true);
  }
})

Disabling with Javascript but no event

And another useful thing to know is how to disable/enable the button without using the event, but still using Javascript. The best way to do that is to use an aura:id .

button.cmp

<aura:component>
  <lightning:button label="example"
                    onclick="{!c.buttonAction}"
                    aura:id="disablebuttonid"/>
</aura:component>

buttonController.js

({
  buttonAction: function(component,event,helper){
    let button = component.find('disablebuttonid');
    button.set('v.disabled',true);
  }
})

Enabling the button

If you want to enable the button, simply just do the same for disabling except pass false instead of true to the examples.

We can help with Lightning Development

Our team at Eigen X has a great deal of experience with Lightning Development on the Salesforce Platform. Feel free to drop us a line: info@eigenx.com or @eigenx.