Code By Code – Lightning Framework – Chapter 3 – SLDS or Aura Component

Code By Code – Lightning Framework – Chapter 3 – SLDS or Aura Component

You can create Aura Component either using normal HTML tags and SLDS stylesheet or by directly accessing out of the box aura component like lightning:button etc. Which one to use, let’s learn in this chapter.

You can create components with Lightning look and feel by using normal HTML tags with Salesforce Lightning Design System CSS library. For example, you can create a button with SLDS like below:

<button class="slds-button slds-button_brand">Brand Button</button>

The lightning framework already comes with base aura components and it is very easy to create markup with the help of aura component. For example, you can create a button using base aura component like below:

<lightning:button variant=”brand” label=”Brand action” title=”Brand action” onclick=”{! c.handleClick }” />

As per Salesforce best practices, always try to use Standard Lightning Component instead of HTML Tags. For ex. Use instead of “button”. The standard aura component offers many advantages:

  • Automatically use SLDS
  • Secure and Optimized for performance
  • Using aura component simplify your job by providing some out of the box functionality that you may have to create with HTML tags
  • Designed with accessibility in mind, that means users with disabilities can also use your app.

Lightning Component Development Day2 - Applying Stylesheet, Create Basic Lightning Component

SLDS vs Aura Components

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

Leave a Reply

Close Menu