"Mastering Salesforce Lightning Buttons: A Guide with Examples"

What Are Lightning Buttons??

Lightning buttons are like clickable buttons in Salesforce that can do special things. They are part of the Lightning Component framework, which makes Salesforce look and work really well. You can put Lightning buttons on different parts of Salesforce, like records, pages, and apps. These buttons help you do your work quickly and without mistakes.?

Types of Lightning Buttons?

Salesforce has different types of Lightning buttons that do different jobs:?

1. Button: The Button component allows you to create clickable actions within your Salesforce Lightning components. Here's an example of a simple Button

<aura:component>
    <lightning:button label="Click Me!" onclick="{!c.handleClick}"/>
</aura:component>        

Output:

In this example, we've created a Button with the label "Click Me!" and associated it with a JavaScript controller function called handleClick.

1. ButtonIcon: ButtonIcon is used to create buttons with icons, providing a more visually appealing user interface. Here's an example:

<aura:component>
    <lightning:buttonIcon iconName="utility:save" alternativeText="Save" onclick="{!c.handleSave}"/>
</aura:component>        

Output:

In this example, we've used the lightning:buttonIcon component to create a button with a "Save" icon from the Salesforce Lightning Design System. It is associated with a controller function called handleSave.

1. ButtonGroup: ButtonGroup is useful when you want to group related actions together. Here's an example:

<aura:component>
    <lightning:buttonGroup>
        <lightning:button label="Approve" onclick="{!c.handleApprove}"/>
        <lightning:button label="Reject" onclick="{!c.handleReject}"/>
    </lightning:buttonGroup>
</aura:component>        

Output:

In this example, we've created a ButtonGroup with two related buttons for "Approve" and "Reject" actions. Each button is associated with its respective controller function.

1. ButtonMenu: ButtonMenu allows you to organize actions within a dropdown menu, making it suitable for scenarios with numerous actions. Here's an example:

<aura:component>
    <lightning:buttonMenu menuAlignment="right">
        <lightning:menuItem label="Edit" value="edit" onclick="{!c.handleEdit}"/>
        <lightning:menuItem label="Delete" value="delete" onclick="{!c.handleDelete}"/>
        <lightning:menuItem label="Clone" value="clone" onclick="{!c.handleClone}"/>
    </lightning:buttonMenu>
</aura:component>        

Output:

In this example, we've created a ButtonMenu with three actions ("Edit," "Delete," and "Clone") organized within a dropdown menu. Each menu Item is associated with a corresponding controller function.

1. ButtonIconStateful: ButtonIconStateful component is used when you need a button that can toggle between two states. Here's an example:

<aura:component>
    <aura:attribute name="liked" default="false" type="Boolean" />
    <div class="slds-m-around_medium">
        <lightning:buttonIconStateful iconName="utility:like" variant="border-filled" selected="{! v.liked }" onclick="{! c.handleLikeButtonClick }" label = "Like" alternativeText="Like" />
    </div>
</aura:component>        

Output:

In this example, we've created a ButtonIconStateful that toggles between a "Like" and "Dislike" icon based on the value of the isLiked attribute. It's associated with the toggleLike controller function.

Conclusion:?

Lightning buttons in Salesforce are like shortcuts that help you work better. You can use them to make your work easier, do things faster, and make fewer mistakes. Whether you're in charge of Salesforce or like to tinker with it, learning how to use Lightning buttons can make your work smoother and more efficient.?