Lightning 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)
Component Markup
Component Bundles
Component IDs
HTML in Components
CSS in Components
Component Attributes
Component Composition
Component Body
Component Facets
Best Practices for Conditional Markup
Component Versioning
Components with Minimum API Version Requirements
Localization
Providing Component Documentation
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.
-
Create Lightning Components in the Developer Console
The Developer Console is a convenient, built-in tool you can use to create new and edit existing Lightning components and other bundles. -
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. -
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[]. The body attribute is an example of a facet. -
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. -
Component Versioning
Component versioning enables you to declare dependencies against specific revisions of an installed managed package. -
Components with Minimum API Version Requirements
Some built-in components require that custom components that use them are set to a minimum API version. A custom component must be equal to or later than the latest API version required by any of the components it uses. -
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. -
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. -
Providing Component Documentation
Component documentation helps others understand and use your components. -
Supporting Accessibility