Lightning Aura Components Developer Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
Introducing Aura Components
Quick Start
Creating Components
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Using the Salesforce Lightning Design System in Apps
Using External CSS
More Readable Styling Markup with the join Expression
Tips for CSS in Components
CSS for RTL Languages
Vendor Prefixes
Styling with Design Tokens and Styling Hooks
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components
Debugging
Performance
Reference
PDF

Using the Salesforce Lightning Design System in Apps

The Salesforce Lightning Design System (SLDS) provides a look and feel that’s consistent with Lightning Experience. Use Lightning Design System styles to give your custom stand-alone Lightning applications a UI that is consistent with Salesforce, without having to reverse-engineer our styles.

Your application automatically gets Lightning Design System styles and design tokens if it extends force:slds. This method is the easiest way to stay up to date and consistent with Lightning Design System enhancements.

To extend force:slds:

<aura:application extends="force:slds">
    <!-- customize your application here -->
</aura:application>

Using a Static Resource

When you extend force:slds, the version of Lightning Design System styles is automatically updated whenever the CSS changes. If you want to use a specific Lightning Design System version, download the version and add it to your org as a static resource.

We recommend extending force:slds instead so that you automatically get the latest Lightning Design System styles. If you stick to a specific Lightning Design System version, your app’s styles will gradually start to drift from later versions in Lightning Experience or incur the cost of duplicate CSS downloads.

Note

To download a version of Lightning Design System that doesn’t exceed the maximum size for a static resource, go to the Lightning Design System downloads page.

Salesforce recommends that you name the Lightning Design System archive static resource using the name format SLDS###, where ### is the Lightning Design System version number (for example, SLDS252). This lets you have multiple versions of the Lightning Design System installed, and manage version usage in your components.

To use the static version of the Lightning Design System in a component, include it using <ltng:require/>. For example:
<aura:component>
    <ltng:require 
        styles="{!$Resource.SLDS252 +
            '/styles/salesforce-lightning-design-system.min.css'}" />
</aura:component>