Lightning Button in LWC (Lightning Web Components)

The Lightning Button in Lightning Web Components (LWC) is fundamental in Salesforce applications, primarily aimed at initiating actions or events. As a standard component within the LWC framework, it enhances the interactive capabilities of user interfaces, integrating seamlessly with Salesforce’s modern approach to building applications. The Lightning Button is predominantly used for triggering JavaScript functions upon user interaction. 

Such interactions can range from data submission and opening modals to page redirects or any specific actions coded within the JavaScript file of the LWC. This functionality makes it a versatile tool for developers and enriches the user experience by enabling dynamic and responsive elements within Salesforce applications.

In this blog, you will learn:

• • Basics of Lightning button in LWC
  • How to Create Quick action button using Lightning web component
  • How to change the Variant of Lightning Button on click of Button in LWC

Key Features

• Variants: The Lightning Button comes in various styles and sizes, allowing developers to choose the appropriate aesthetic for their application. These include standard, brand, neutral, and more.
• Icons and Labelling: Buttons can be configured with icons, labels, or both, enhancing user experience and clarity.
• Disabled State: Buttons can be disabled to prevent user interaction when certain conditions are unmet, enhancing the application’s logic and user flow.
• Events Handling: The Lightning Button can be tied to various event handlers in JavaScript, allowing for complex interactions and responsive UIs.
• Accessibility: These buttons are designed with accessibility in mind, ensuring that applications built with them are usable by a wide range of users, including those with disabilities.
• Customization: Developers can customize the appearance and behavior of the Lightning Button using CSS and JavaScript, allowing for a tailored user experience.
• Ease of Use: The component is designed to be easily integrated into LWC applications, with simple syntax and a straightforward API.

Also Read – Salesforce Lightning Components

How to Create Quick Action button using Lightning Web Component

First, you’ll need to develop the LWC that you want to be triggered by the Quick Action.

1. Develop the Component: Create a new LWC component. This component will be what is displayed when the Quick Action is triggered.
2. Configure the Component for Quick Actions: To make your LWC available for Quick Actions, you need to configure it properly. This typically involves setting the isExposed property to true in the component’s metadata file (<component-name>.js-meta.xml) and adding targetConfig tags to specify that it’s available for use in a Quick Action. For example:

<?xml version=”1.0″ encoding=”UTF-8″?>

<LightningComponentBundle xmlns=”http://soap.sforce.com/2006/04/metadata” fqn=”myQuickActionLwc”>

    <apiVersion>XX.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordAction</target>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

    <targetConfigs>

        <targetConfig targets=”lightning__RecordAction”>

            <objects>

                <object>*</object>

            </objects>

        </targetConfig>

    </targetConfigs>

</LightningComponentBundle>

Create the Quick Action in Salesforce Setup

Once your component is ready and properly configured:

1. Navigate to Object Manager: Go to Setup in your Salesforce org, and then navigate to the Object Manager.

2. Select the Object: Choose the object for which you want to create the Quick Action (e.g., Account, Contact).

3. Create a New Action: In the object’s management settings, find the “Buttons, Links, and Actions” section, and click “New Action”.

4. Configure the Action:

• Action Type: Select “Lightning Component”.
• Lightning Component: Choose the LWC you created.
• Fill out the other required fields like Label, Name, and Description.

5. Save the Action.

Add the Quick Action to the Page Layout

Finally, add the Quick Action to the appropriate page layout(s) for the object.

1. Navigate to Page Layouts: In the Object Manager, under the same object, find “Page Layouts”.
2. Edit the Page Layout: Choose the layout(s) where you want the Quick Action to appear and click “Edit”.
3. Add the Quick Action: Drag your new Quick Action into the Salesforce Mobile and Lightning Experience Actions section of the layout.
4. Save the Layout.

Testing and Deployment

After setting everything up, test the Quick Action in your Salesforce org to ensure it works as expected. If you’re using Salesforce DX, remember to deploy your changes to your production environment when ready.

Also Read – Salesforce LWC Datatable – Go-To Guide

How to change the Variant of Lightning Button on click of Button in LWC?

Define the Component’s HTML Template:

• Include a button in your component’s HTML template.
• Use a JavaScript property to dynamically set the button’s variant.

Example:

<template>

    <lightning-button label=”Click Me” variant={buttonVariant} onclick={handleChange}></lightning-button>

</template>

Add JavaScript Logic:

• In the JavaScript file of your LWC, define a property to hold the button’s variant.
• Create a method to handle the button’s onclick event.
• In this method, change the variant property based on the current state or any other logic you want to implement.

Example:

import { LightningElement, track } from ‘lwc’;

export default class MyComponent extends LightningElement {

    @track buttonVariant = ‘brand’;

    handleChange() {

        if (this.buttonVariant === ‘brand’) {

            this.buttonVariant = ‘success’;

        } else {

            this.buttonVariant = ‘brand’;

        }

    }

}

For more button types, refer: https://developer.salesforce.com/docs/component-library/bundle/lightning:button/example#lightningcomponentdemo:exampleRegularButtonsIcon

Test the Component:

• Deploy your component and test it.
• Each time you click the button, the handleChange method should be triggered, changing the variant of the button.

Additional Considerations:

• You can add more variants and logic as needed.
• Use @track decorator if you need to track the changes in the buttonVariant property for re-rendering.
• Make sure to import the necessary modules and components from the ‘lwc’ and ‘lightning’ namespaces.

Conclusion

As we’ve explored, the Lightning Button in Lightning Web Components (LWC) is not just a feature but a gateway to building dynamic, user-friendly Salesforce applications. By understanding its nuances, from creating quick actions to modifying button variants, you empower yourself to craft more engaging and responsive user interfaces.

Your journey with Salesforce and LWC is just beginning. To delve deeper and truly master the art of Salesforce development, consider joining our Slack community. Here, you’re not just learning alone; you’re part of a vibrant community of Salesforce enthusiasts and experts who share your passion and dedication.

And for those who crave a more structured learning path, our online Salesforce bootcamps are the perfect fit. With hands-on training, real-world projects, and expert guidance, these bootcamps are designed to elevate your skills from novice to Salesforce pro. 

You’ll not only learn the theory but also apply it in practical scenarios, ensuring you’re job-ready and confident in your abilities. 

Together, let’s navigate the exciting world of Salesforce and unlock new opportunities for growth and success.