While building Lightning Web Component (LWC) in one of my project, there was a business case where I need to disable a button conditionally. I know that we need to use template property to find the element and disable it. But like any developer, I GOOGLED it first, and found that there was no results on this.

Hence I decided to explore it myself and finally solved it. So just to make sure that it’s available online for others while searching for solution, I am blogging about it today.

Disabled lightning-button

Please find below my LWC component for your reference.

disableButton.html

<template>
    <lightning-card title="Button Disable Test">
        <div class="slds-align_absolute-center">
            <lightning-button label="Test Button" variant="brand" name="TestButton"></lightning-button>
        </div>
    </lightning-card>
</template>

disableButton.js

import { LightningElement } from 'lwc';

export default class buttonDisableCmp extends LightningElement {
    renderedCallback() {
        let test = this.template.querySelector('lightning-button');
        test.disabled = true;
    }
}

You may also find the Git Repo in Lightning Gallery tab.

HAPPY CODING!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s