Lightning Aura Components Developer Guide
jSummer '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)
Component Names
Create Aura Components Using Salesforce CLI
Component Markup
Component Bundles
Component IDs
CSS in Components
Component Composition
Component Body
Component Facets
Best Practices for Conditional Markup
Aura Component Versioning for Managed Packages
Base Components with Minimum API Version Requirements
Localization
Newer Version Available
Creating Components
Components are the functional units of the Lightning Component framework.
A component encapsulates a modular and potentially reusable section of UI, and can range in granularity from a single line of text to an entire application.
-
Component Names
A component name must follow the naming rules for Lightning components. -
Create Aura Components in the Developer Console
The Developer Console is a convenient, built-in tool you can use to create new and edit existing Aura components and other bundles. -
Create Aura Components Using Salesforce CLI
To develop Aura components, use Salesforce CLI to synchronize source code between your Salesforce orgs and version control system. Alternatively, you can use the Developer Console. -
Component Markup
Component resources contain markup and have a .cmp suffix. The markup can contain text or references to other components, and also declares metadata about the component. -
Component Bundles
A component bundle contains a component or an app and all its related resources. -
Component IDs
A component has two types of IDs: a local ID and a global ID. You can retrieve a component using its local ID in your JavaScript code. A global ID can be useful to differentiate between multiple instances of a component or for debugging purposes. -
HTML in Components
An HTML tag is treated as a first-class component by the framework. Each HTML tag is translated into an <aura:html> component, allowing it to enjoy the same rights and privileges as any other component. -
CSS in Components
Style your components with CSS. -
Component Attributes
Component attributes are like member variables on a class in Apex. They are typed fields that are set on a specific instance of a component, and can be referenced from within the component's markup using an expression syntax. Attributes enable you to make components more dynamic. -
Using Expressions
Expressions allow you to make calculations and access property values and other data within component markup. Use expressions for dynamic output or passing values into components by assigning them to attributes. -
Component Composition
Composing fine-grained components in a larger component enables you to build more interesting components and applications. -
Component Body
The root-level tag of every component is <aura:component>. Every component inherits the body attribute from <aura:component>. -
Component Facets
A facet is any attribute of type Aura.Component[]. Use this type as a placeholder for a block of markup. The body attribute is an example of a facet. -
Controlling Access
The framework enables you to control access to your applications, attributes, components, events, interfaces, and methods via the access system attribute. The access system attribute indicates whether the resource can be used outside of its own namespace. -
Using Object-Oriented Development
The framework provides the basic constructs of inheritance and encapsulation from object-oriented programming and applies them to presentation layer development. -
Best Practices for Conditional Markup
Using the <aura:if> tag is the preferred approach to conditionally display markup but there are alternatives. Consider the performance cost and code maintainability when you design components. The best design choice depends on your use case. -
Aura Component Versioning for Managed Packages
Aura component versioning enables you to declare dependencies against specific revisions of an installed managed package. -
Base Components with Minimum API Version Requirements
Some Lightning base components require the custom components that use them to be set to a minimum API version. A custom component’s API version must be equal to or later than the latest API version required by any of the components it uses. -
Validations for Aura Component Code
Validate your Aura component code to ensure compatibility with Aura component APIs, best practices, and avoidance of anti-patterns. There are several ways to validate your code. Minimal save-time validations catch the most significant issues only, while Salesforce DX tools provide more comprehensive static code analysis. -
Using Labels
Labels are text that presents information about the user interface, such as in the header (1), input fields (2), or buttons (3). While you can specify labels by providing text values in component markup, you can also access labels stored outside your code using the $Label global value provider in expression syntax. -
Localization
The framework provides client-side localization support on input and output components. -
Supporting Accessibility
-
Writing Documentation for the Component Library
Documentation helps developers use your components to develop their apps more effectively. You can provide interactive examples, documentation, and specification descriptions for a component, event, or interface.