Aura Component
An Aura Component is a unit of custom UI built with the original Salesforce Lightning Component framework, released in 2014 and superseded by Lightning Web Components in 2019.
Definition
An Aura Component is a unit of custom UI built with the original Salesforce Lightning Component framework, released in 2014 and superseded by Lightning Web Components in 2019. Aura components are made up of a component markup file (.cmp), a controller, a helper, a renderer, an event bundle, and a metadata file. The framework was Salesforce's first answer to building a single-page-app feel on top of Visualforce, predating native Web Components in the browser.
Aura still runs in production orgs. Many standard Salesforce features (older Lightning record pages, parts of the Service Console, Aura-based community templates) were built in Aura and have not been ported to LWC. Custom Aura components from earlier builds also remain widely deployed. Salesforce supports Aura but no longer invests in new Aura features. The official guidance is to build new components in LWC and migrate Aura components opportunistically as they require change.
How an Aura Component fits in a modern Salesforce org
Why Aura was built and why it was replaced
In 2014, no browser supported Web Components natively. Salesforce needed a component model that worked across IE, Chrome, Safari, and Firefox, and that integrated with the Salesforce server runtime. Aura solved that with its own templating syntax, event system, and rendering lifecycle, all wrapped in a Java-style JavaScript class structure. By 2019, Web Components had landed in every modern browser, and Salesforce rebuilt the framework on top of the standard, calling the result Lightning Web Components. Aura was kept running for backwards compatibility but stopped getting major feature investment.
The Aura component bundle
An Aura component lives in a bundle: myComponent.cmp (markup), myComponentController.js (action handlers wired through HTML attributes), myComponentHelper.js (reusable internal functions), myComponentRenderer.js (rare, optional override of the DOM lifecycle), myComponent.css (scoped styles), and myComponent.design (for App Builder properties). The bundle also includes an Aura definition file in XML format. The verbosity (six or seven files for one component) is one reason developers prefer LWC, which collapses the bundle to four files.
Attributes, expressions, and the v.<name> pattern
Aura components declare attributes with <aura:attribute name="recordId" type="Id" />. Inside the markup, expressions wrap attribute references with the v. prefix and curly braces: {!v.recordId}. The v stands for "value" and is shorthand for the component's value provider. Helper functions can manipulate attributes through component.set and component.get. This pattern is unique to Aura and does not translate directly to LWC, which uses property binding more like React.
Events: component vs application
Aura has its own event system, separate from the browser DOM. A component event bubbles up through the parent hierarchy. An application event fires globally to anyone registered as a handler. Both are declared in XML files in the bundle and fired through component.getEvent("eventName").fire(). LWC replaced this with the standard CustomEvent pattern, so Aura developers moving to LWC have to unlearn the registerEvent and handleEvent pattern.
Server-side Apex calls in Aura
Aura controllers talk to Apex through Apex.run, $A.enqueueAction, or AuraEnabled methods on a server-side controller class. The component pulls the server action by name, sets parameters, and adds it to a queue that batches network calls for the next browser tick. The queueing model is invisible to most developers but matters for performance: rapidly firing actions get coalesced. LWC dropped this queue and uses imperative promises or wire adapters instead.
Aura and LWC interoperability
Aura and LWC can run on the same page. An Aura component can embed an LWC inside its markup using the c:lwcComponent tag, passing attributes through. LWC components cannot embed an Aura component, so when an Aura host wraps an LWC child the data flow is one direction. Aura events and LWC custom events cross the boundary cleanly: an LWC fires a CustomEvent, the parent Aura handles it as an Aura event. This is how most orgs run mixed-framework Lightning pages without rewriting their existing Aura inventory.
Locker Service: the security sandbox
Aura runs inside Locker Service, a JavaScript sandbox that wraps the DOM, the window object, and most browser globals with proxies that prevent one component from reaching into another. Locker was strict, slow, and broke a long list of third-party libraries. Salesforce shipped Lightning Web Security as the modern replacement, but legacy Aura code that worked under Locker may not run cleanly under LWS without testing. This is one of the technical reasons Aura migrations are deliberate, not bulk.
Building an Aura Component in a Salesforce org
Building an Aura component starts in the Developer Console or a Salesforce DX project. The bundle includes the component markup, a JavaScript controller, optional helper functions, and the design and meta XML files that surface the component in App Builder.
- Create the Aura bundle
In the Developer Console, File, New, Lightning Component. Give it a name and the IDE scaffolds the bundle. From the Salesforce CLI: sf lightning generate component --type aura --name myComponent.
- Open the component markup
Edit myComponent.cmp. Declare attributes at the top with <aura:attribute>. Add the implements clause to expose the component to App Builder: implements="flexipage:availableForAllPageTypes,force:hasRecordId".
- Write the controller and helper
Open myComponentController.js. Each function is wired to a markup event handler. Helpers go in myComponentHelper.js and are called from the controller via helper.functionName(component).
- Call Apex from the controller
Apex methods marked @AuraEnabled are callable from the controller. Use component.get("c.methodName"), set parameters with action.setParams, set a callback with action.setCallback, and add to the queue with $A.enqueueAction.
- Add the component to App Builder
Open Setup, Lightning App Builder, drag the component onto a record page from the Custom palette. Save and activate. The implements clause from step 2 is what makes the component show up.
XML attribute that declares which interfaces the Aura component supports. flexipage:availableForAllPageTypes is the most common, exposing the component to App Builder.
Supported types include String, Integer, Boolean, Id, List, Map, Object, sObject, and Date. Type checking is enforced at runtime.
XML file that declares App Builder properties. Without a design file, the component cannot expose configurable properties to admins.
XML element <aura:registerEvent> declares which custom events a component can fire. <aura:handler> declares which events the component listens to.
Org-level setting that controls which JavaScript sandbox the Aura component runs in. Locker is the legacy default. LWS is the modern replacement.
- Aura is the older framework. Build new components in LWC by default and only fall back to Aura when you specifically need an Aura-only feature.
- Component events and application events have different bubbling rules. An application event fires globally, which is useful for cross-component messaging but easy to abuse as global state.
- Aura controllers cannot directly call Apex with a Promise. The $A.enqueueAction queue is callback-based. Wrap it in a Promise helper if you want async/await ergonomics.
- Aura and LWC styles do not always share scope cleanly. SLDS overrides written in an Aura wrapper component may not reach into an embedded LWC running in native shadow.
- Locker Service is on a deprecation glide path. Test critical Aura components in a sandbox with Lightning Web Security enabled to catch incompatibilities early.
Trust & references
Cross-checked against the following references.
- Lightning Aura Components Developer GuideSalesforce Developers
Straight from the source - Salesforce's reference material on Aura Component.
- Lightning Aura Components Developer GuideSalesforce Developers
- Aura Component BasicsSalesforce Developers
- Migrate Aura Components to LWCSalesforce Developers
About the Author
Dipojjal Chakrabarti is a B2C Solution Architect with 29 Salesforce certifications and over 13 years in the Salesforce ecosystem. He runs salesforcedictionary.com to help admins, developers, architects, and cert/interview candidates sharpen their fundamentals. More about Dipojjal.
Test your knowledge
Q1. What is an Aura Component?
Q2. What does Salesforce recommend for new development?
Q3. Can Aura and LWC coexist?
Discussion
Loading discussion…