function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Keith Lee 15Keith Lee 15 

Multiple lightning:button in a Lightning Component

I am trying to build a Lightning Component for a home page that will display three buttons with each one opening up a different link.  

The buttons are all lined up against the border on the left. How do I add padding so that they are all aligned just off of the border?

User-added image

Here is my code: 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <lightning:card>
        <aura:set attribute="title">
            <lightning:icon iconName="utility:open_folder" size="small" />
            XYZ Reports
        </aura:set>
  
        <lightning:button label="Download XYZ Report" onclick="{! c.downloadClick}" iconName="utility:download" iconPosition="left" /><br/>
        <br/>
        <lightning:button label="View XYZ Report" onclick="{! c.viewReportClick}" /><br/>
        <br/>
        <lightning:button label="View XYZ Dashboard" onclick="{! c.viewDashClick}" /> <br/>  
        
    </lightning:card>
</aura:component>

 
Best Answer chosen by Keith Lee 15
ryanschierholzryanschierholz
First, if you are starting on a new component, I'd recommend learning the new Lightning Web Components, since that is the future. In either case, the best thing is to surround the items with a <div> tag and use the markup from https://lightningdesignsystem.com/

Therefore, you'll have code like: 
  
<div class="slds-m-around_small">

<lightning:button label="Download XYZ Report" onclick="{! c.downloadClick}" iconName="utility:download" iconPosition="left" /><br/>
        <br/>
        <lightning:button label="View XYZ Report" onclick="{! c.viewReportClick}" /><br/>

        <br/>
        <lightning:button label="View XYZ Dashboard" onclick="{! c.viewDashClick}" /> <br/>
</div>

the slds-m-around_small gives it a margin of 'small' and could be changed to medium, x-small, and others.

All Answers

ryanschierholzryanschierholz
First, if you are starting on a new component, I'd recommend learning the new Lightning Web Components, since that is the future. In either case, the best thing is to surround the items with a <div> tag and use the markup from https://lightningdesignsystem.com/

Therefore, you'll have code like: 
  
<div class="slds-m-around_small">

<lightning:button label="Download XYZ Report" onclick="{! c.downloadClick}" iconName="utility:download" iconPosition="left" /><br/>
        <br/>
        <lightning:button label="View XYZ Report" onclick="{! c.viewReportClick}" /><br/>

        <br/>
        <lightning:button label="View XYZ Dashboard" onclick="{! c.viewDashClick}" /> <br/>
</div>

the slds-m-around_small gives it a margin of 'small' and could be changed to medium, x-small, and others.
This was selected as the best answer
gbritgsgbritgs
You, also, can force the padding using CSS. Give the buttons a class name and in your CSS file access it and use padding to make them all equal