Lightning Aura Components Developer Guide
Summer '26 (API version 67.0)
Spring '26 (API version 66.0)
Winter '26 (API version 65.0)
Summer '25 (API version 64.0)
Spring '25 (API version 63.0)
Winter '25 (API version 62.0)
Summer '24 (API version 61.0)
Spring '24 (API version 60.0)
Winter '24 (API version 59.0)
Summer '23 (API version 58.0)
Spring '23 (API version 57.0)
Winter '23 (API version 56.0)
Summer '22 (API version 55.0)
Spring '22 (API version 54.0)
Winter '22 (API version 53.0)
Summer '21 (API version 52.0)
Spring '21 (API version 51.0)
Winter '21 (API version 50.0)
Summer '20 (API version 49.0)
Spring '20 (API version 48.0)
Winter '20 (API version 47.0)
Summer '19 (API version 46.0)
Spring '19 (API version 45.0)
Winter '19 (API version 44.0)
Summer '18 (API version 43.0)
Spring '18 (API version 42.0)
Winter '18 (API version 41.0)
Summer '17 (API version 40.0)
Spring '17 (API version 39.0)
Winter '17 (API version 38.0)
Summer '16 (API version 37.0)
Spring '16 (API version 36.0)
Winter '16 (API version 35.0)
Summer '15 (API version 34.0)
Spring '15 (API version 33.0)
Winter '15 (API version 32.0)
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
Developing Secure Code
Testing Components
Styling Apps
An app is a special top-level component whose markup is in a .app
resource. Just like any other component, you can put CSS in its bundle in a resource called
<appName>.css.
For example, if the app markup is in notes.app, its CSS is in notes.css.
When viewed in Salesforce for Android, iOS, and Lightning Experience, the components include
styling that matches those visual themes. For example, the lightning:button includes the slds-button_neutral class to display a neutral style.
Styles added to Lightning components in Salesforce for Android, iOS, and Lightning Experience don’t apply to components in standalone apps.
Note
-
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. -
Using External CSS
To reference an external CSS resource, upload it as a static resource and use a <ltng:require> tag in your .cmp or .app markup. -
More Readable Styling Markup with the join Expression
Markup can get messy when you specify the class names to apply based on the component attribute values. Try using a join expression for easier-to-read markup. -
Tips for CSS in Components
Here are some tips for configuring the CSS for components that you plan to use in Lightning pages, the Lightning App Builder, or the Experience Builder. -
CSS for RTL Languages
When your Language setting in Salesforce is set to a right-to-left (RTL) language, the framework automatically flips property names, such as left and border-left to right and border-right respectively. The framework also rearranges certain values like padding, margin, and border-radius so that the right and left units are swapped. -
Styling with Design Tokens and Styling Hooks
Capture the essential values of your visual design into named tokens or global styling hooks. Reuse these values throughout your Lightning components CSS resources. Tokens and styling hooks make it easy to ensure that your design is consistent, and even easier to update your design as it evolves.