How to Extend Components in the Aura Framework (Salesforce)

Posted by Vinay Vernekar 12th December 2025

Overview

Extending components in the Aura framework allows you to reuse behavior and markup by creating a base component and deriving child components from it. This is useful for standardizing UI patterns, sharing helper functions, and exposing a consistent API across multiple components.

Key Concepts

Use these Aura features when you want to extend or reuse component functionality:

  • Component Inheritance via the extends attribute on <aura:component>.
  • Public attributes with access="public" to expose configurable properties.
  • Public methods using <aura:method> to define callable APIs.
  • Composition vs Inheritance: prefer composition for flexibility; inheritance when you need a shared base implementation.

How to Extend a Component — Example

Below is a simple example showing a base component that defines an attribute, a method, and a controller function. A child component extends the base component and can override behavior or call the base API.

Base component: c:baseComponent

<aura:component>
<aura:attribute name="title" type="String" access="public" default="Base Title" />
<aura:method name="showTitle" action="{!c.showTitle}" access="public" />

<div class="base-box">
<h3>{!v.title}</h3>
<ui:button label="Show" press="{!c.handlePress}" />
</div>
</aura:component>

Base component client controller: baseComponentController.js

({
showTitle : function(component, event, helper) {
var t = component.get("v.title");
alert("Base title: " + t);
},

handlePress : function(component, event, helper) {
component.showTitle();
}
})

Child component extending base: c:childComponent

<aura:component extends="c:baseComponent">
<aura:attribute name="subtitle" type="String" access="public" default="Child Subtitle" />

<!-- You can reuse base markup. Add or override markup as needed. -->
<div class="child-box">
<h4>{!v.subtitle}</h4>
<!-- still uses base show button and methods -->
</div>
</aura:component>

Child controller can override or extend behavior:

({
showTitle : function(component, event, helper) {
// call base method's behavior if needed
// component.showTitle(); // this will call the public aura:method implemented in the base

// Add child-specific behavior
var subtitle = component.get("v.subtitle");
console.log('Child subtitle: ' + subtitle);
}
})

Best Practices and Limitations

Keep these in mind when extending components:

  • Use access="public" for attributes and <aura:method> for methods you want child components or external consumers to use.
  • Child components inherit attributes and methods from the base component, but they do not inherit private implementation details. Avoid relying on fragile internal state.
  • A child component cannot remove base markup; it can add additional markup or override client-side controller methods. For complex variations, prefer composition (wrap the base component inside a new component).
  • Testing and maintainability: minimize deep inheritance chains. One or two levels is OK, but complex hierarchies become hard to manage.
  • Security: respect Locker Service restrictions and always set correct access values for attributes/methods.

When to Use Composition Instead

Prefer composition when you need:

  • Multiple independent behaviors combined in different ways.
  • To avoid tight coupling between components.
  • To allow each component to evolve independently.

Summary

To extend an Aura component, use the extends="c:yourBaseComponent" attribute on <aura:component>, expose public attributes and methods, and override or augment client-side controller logic as needed. While inheritance helps share implementation and markup, prefer composition when you need greater flexibility and loose coupling.