Lightning Aura Components Developer Guide

Introducing Aura Components
Quick Start
Creating Components
Component Names
Create Aura Components in the Developer Console
Create Aura Components Using Salesforce CLI
Component Markup
Component Namespace
Component Bundles
Component IDs
HTML in Components
CSS in Components
Component Attributes
Using Expressions
Component Composition
Component Body
Component Facets
Controlling Access
Using Object-Oriented Development
Best Practices for Conditional Markup
Aura Component Versioning for Managed Packages
Base Components with Minimum API Version Requirements
Validations for Aura Component Code
Using Labels
Localization
Working with Lightning Base Components
Supporting Accessibility
Writing Documentation for the Component Library
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components
Debugging
Performance
Reference
PDF

Note: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.

Component Bundles

A component bundle contains a component or an app and all its related resources.
Resource Resource Name Usage See Also
Component or Application sample.cmp or sample.app The only required resource in a bundle. Contains markup for the component or app. Each bundle contains only one component or app resource. Creating Components

aura:application
CSS Styles sample.css Contains styles for the component. CSS in Components
Controller sampleController.js Contains client-side controller methods to handle events in the component. Handling Events with Client-Side Controllers
Design sample.design File required for components used in Lightning App Builder, Lightning pages, Experience Builder, or Flow Builder. Aura Component Bundle Design Resources
Documentation sample.auradoc A description, sample code, and one or multiple references to example components Writing Documentation for the Component Library
Renderer sampleRenderer.js Client-side renderer to override default rendering for a component. Create a Custom Renderer
Helper sampleHelper.js JavaScript functions that can be called from any JavaScript code in a component’s bundle Sharing JavaScript Code in a Component Bundle
SVG File sample.svg Custom icon resource for components used in the Lightning App Builder or Experience Builder. Configure Components for Lightning Pages and the Lightning App Builder

All resources in the component bundle follow the naming convention and are auto-wired. For example, a controller <componentName>Controller.js is auto-wired to its component, which means that you can use the controller within the scope of that component.

File-Size Limits

Each resource, such as a cmp, css, or js file, in an Aura component bundle has a maximum file size of 1,000,000 bytes. However, for performance reasons, we recommend that you don’t exceed a maximum file size of 128 KB (131,072 bytes).