Lightning 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 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
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.
Use the Developer Console to create components.
-
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. -
HTML in Components
An HTML tag is treated as a first-class component by the framework. Each HTML tag is translated into a 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
Use the <aura:if> or <aura:renderIf> tags to conditionally display markup. Alternatively, you can conditionally set markup in JavaScript logic. Consider the performance cost as well as 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. -
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
The framework supports various methods to provide labels in your code using the $Label global value provider, which accesses labels stored outside your code. -
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