Click with Style: Designing Icon-Only Buttons in LWC

Greetings, fellow SFDC developers! In this guide, we’ll dive into the process of creating elegant and effective icon-only buttons in LWC. As seasoned developers, we understand the significance of thoughtful UI design and its impact on user experience.

So, let’s go through this article of designing iconic buttons that are not just visually appealing but also functionally seamless.

Icon-Only Buttons in the LWC World

Icon-only buttons play a crucial role in simplifying user interfaces, offering users clear and concise actions. Now, let’s walk through the essential steps for designing these iconic buttons within the Lightning Web Components framework.

HTML Code

<template>
   <div style="background:white;padding:10px">
       <!-- favourite icon rendered with a bare variant -->
        <lightning-button-icon
            class="slds-m-right_small"
            icon-name="utility:favorite"
            alternative-text="Favorite"
            variant="bare"
            onclick={handleButtonClick}
        ></lightning-button-icon>

        <!-- add icon rendered with a container variant -->
        <lightning-button-icon
            class="slds-m-right_small"
            icon-name="utility:add"
            alternative-text="Add"
            variant="container"
            onclick={handleButtonClick}
        ></lightning-button-icon>

        <!-- announcement icon rendered with a brand variant -->
        <lightning-button-icon
            class="slds-m-right_small"
            icon-name="utility:announcement"
            alternative-text="Announcement"
            variant="brand"
            onclick={handleButtonClick}
        ></lightning-button-icon>

        <!-- anywhere_chat icon rendered with a border variant -->
        <lightning-button-icon
            class="slds-m-right_small"
            icon-name="utility:anywhere_chat"
            alternative-text="Chat"
            variant="border"
            onclick={handleButtonClick}
        ></lightning-button-icon>

        <!-- archive icon rendered with a border-filled variant -->
        <lightning-button-icon
            class="slds-m-right_small"
            icon-name="utility:archive"
            alternative-text="Archive"
            variant="border-filled"
            onclick={handleButtonClick}
        ></lightning-button-icon>

        <!-- div element with blue background, so that bare-inverse and border-inverse variants are visible -->
        <div style="background-color: #0176d3;padding:10px;margin-top:10px">
            <!-- builder icon rendered with a bare-inverse variant -->
            <lightning-button-icon
                class="slds-m-right_small"
                icon-name="utility:builder"
                alternative-text="Builder"
                variant="bare-inverse"
                onclick={handleButtonClick}
            ></lightning-button-icon>

            <!-- call icon rendered with a border-inverse variant -->
            <lightning-button-icon
                class="slds-m-right_small"
                icon-name="utility:call"
                alternative-text="Call"
                variant="border-inverse"
                onclick={handleButtonClick}
            ></lightning-button-icon>
        </div>
   </div>
</template>

Explanation:

In LWC to create an icon-only button we need to use <lightning-button-icon> tag. This is a standard component provided by the lightning framework. We can use it to create button with only icons.

Here’s the HTML structure:

• We use the lightning-button-icon component, specifying the icon name, alternative text, and the variant.
• You can use any of the icons provided by Salesforce Lightning Design System.
• The onclick event is linked to the handleButtonClick method, where you can include your custom logic.

You can learn more about using Salesforce Lightning Design System icons, read the article about How to Use SLDS Icons in LWC

In our example we have created multiple icons with all the variants available. Variants that are available to use with lightning-button-icon:

• bare
• container
• brand
• border
• border-filled
• bare-inverse
• border-inverse

JS Code

import { LightningElement } from 'lwc';

export default class IconOnlyButton extends LightningElement {
  handleButtonClick() {
    // Your logic for button click goes here
    console.log('Button clicked!');
  }
}

Explanation:

Now, let’s add the JavaScript logic for our button within the Lightning Web Component. In our example we are not doing much here, you can implement any logic as per your requirements.

Demo

Conclusion

To wrap it up, in this guide we have learned how to show Icon-Only Buttons in LWC using the lightning-button-icon component. Some of the important use-cases where you need to use icon-only buttons can be using it as an action button on lightning-datatable.

Feel free to leverage the provided code snippets in your projects, and don’t hesitate to share your thoughts or suggestions in the comments below.

Remember, simplicity in design often leads to enhanced user experiences. Happy coding!

Enjoyed this guide? Stay tuned for more Salesforce tips by subscribing to our newsletter. If you found this article helpful, share it with your friends in the Salesforce developer community!