Click, Change, Conquer: Managing Button States in LWC Salesforce

Welcome to another exciting article on Salesforce development! In this blog, we’ll explore the button states in LWC (Lightning Web Components). If you’re looking to elevate your user interface with interactive buttons, you’re in the right place. Let’s dive into the code and understand the use cases of managing button states in LWC Salesforce.

You can also check our previous post on Designing Icon-Only Buttons in LWC

Understanding Button States in LWC

Button states play a crucial role in providing visual feedback to users, creating a dynamic and engaging experience. Maintaining state helps user differentiate between buttons which is clicked/ active and the one which is not.

In LWC, managing these states involves controlling how a button appears and behaves based on user interactions.

HTML Code

<!-- buttonStateManagement.html -->
<template>
     <lightning-button-icon-stateful 
            icon-name="utility:call" 
            selected={callState} 
            onclick={handleCallButtonClick} 
            alternative-text="Call">

        </lightning-button-icon-stateful>

        <lightning-button-icon-stateful 
            icon-name="utility:builder" 
            selected={builderState} 
            onclick={handleBuilderButtonClick} 
            alternative-text="Builder">

        </lightning-button-icon-stateful>
</template>

Explanation:

One of the important elements utilized to create a stateful button is using the <lightning-button-icon-stateful> tag. This is similar to the <lightning-button-icon> except that it has the inbuild mechanism to maintain a button state in LWC Salesforce.

We control the state of the button by setting the selected attribute to true/ false.

Read more about <lightning-button-icon-stateful> tag from the Salesforce Documentation.

JS Code

// buttonStateManagement.js
import { LightningElement, track } from 'lwc';

export default class ButtonStateManagement extends LightningElement {
    @track callState = false;
    @track builderState = false;

    handleCallButtonClick(){
        this.callState = !this.callState;
    }

    handleBuilderButtonClick(){
        this.builderState = !this.builderState;
    }
}

Explanation:

We can set the selected attribute to true/false with the help of JS Code.

In the above example, we created a variable with @track annotation to dynamically store the state (true/false) and then toggle that with the handleCallButtonClick or handleBuilderButtonClick.

Demo

As you can see from the demo above, how easy it is for the users to identify which buttons are clicked and which are not.

Conclusion

Being able to manage and show button state can be a very important feature when dealing with multiple buttons in a UI.

Imagine building a UI to configure or filter a particular block of data in the HTML. To implement this feature you might require multiple buttons with icons for an interactive UI.

Being able to show users which buttons are clicked and which ones are not will be a very important behavior that is expected.

You can easily create and manage button states in LWC Salesforce using <lightning-button-icon-stateful> tag without using custom CSS and JS state variables.

We value your feedback! If you have suggestions, encounter any issues, or want to share your experience, drop a comment below. Don’t forget to subscribe to our newsletter for more Salesforce tips and share this article with fellow developers if you found it useful.