Adding button (lightning:button) – Salesforce CRM Online Training and Knowledge Sharing

lightning:button is predefined element under the namespace of lightning

Attributes :
a. title : when we keep the cursor tip on the button this message will be displayed.
b. label : It is a text message that will be displayed on the button
c. variant:
1. This will specify format of the button
2. Possible values base, neutral, brand, destructive, inverse and success.
d. iconName:
1. name of the icon we want to display on the button

eg., iconName : standard:action

action :action
2. you can goto lightning design system and get the names of the icon
e. iconPosition:
1. This will specify the location at which icon should be displayed
2. Possible values are right and left
f. disabled : It accepts boolean value. The button will be deactived when it is true.

<aura:component>
   <lightning:button label="button 1"></lightning:button>
   <lightning:button label="close" iconName="action:close"/> 
   <lightning:button label="audio" iconName="action:announcement" iconPosition="right"/>
   <lightning:button label="Add user" iconName="utility:adduser"/>
   <lightning:button label="not active" disabled="true"/>
   <lightning:button label="download" iconName="action:download" iconPosition="right"/>
   <lightning:button label="base" variant="base"/>
   <lightning:button label="neutral" variant="neutral"/>    
   <lightning:button label="brand" variant="brand"/>
   <lightning:button label="destructive" variant="destructive"/>
   <lightning:button label="inverse" variant="inverse"/>
   <lightning:button label="success" variant="success" title="done successful"/>
</aura:component>

lightning:buttonGroup – is used to display a set of buttons together. Preview the below application to understand better.

A lightning:buttonGroup component represents a set of buttons that can be displayed together. Example 1

<aura:application extends="force:slds">
    <lightning:buttonGroup>
        <lightning:button label="Submit" />
        <lightning:button label="Cancel" />
        <lightning:button label="Reset" />
   </lightning:buttonGroup>
</aura:application>

lightning:buttonMenu – is used to display the buttons in the form of drop-down when clicked. Exampe 1

<lightning:buttonMenu iconName="utility:down" alternativeText="down">
     <lightning:menuItem label="Account" />
     <lightning:menuItem label="Contact" />
     <lightning:menuItem label="Opportunity" />       
     <lightning:menuItem label="Case" />
</lightning:buttonMenu>

Example 2

<aura:application extends="force:slds">
    <lightning:buttonIcon variant="bare" iconName="utility:settings" alternativeText="Settings"/>    
    <lightning:buttonMenu iconName="utility:down">
        <lightning:menuItem label="Change Status"></lightning:menuItem>
        <lightning:menuItem label="Change Owner"></lightning:menuItem>
    </lightning:buttonMenu>    
    
    <lightning:buttonGroup >
        <lightning:button label="New"></lightning:button>
        <lightning:button label="Import"></lightning:button>
        <lightning:button label="Add to Campaign"></lightning:button>
        <lightning:buttonMenu iconName="utility:down">
            <lightning:menuItem label="Change Status"/>      
            <lightning:menuItem label="Change Owner"/>
        </lightning:buttonMenu>
    </lightning:buttonGroup>
</aura:application>