Base Components: Aura Vs Lightning Web Components

Many of the base components for LWC provide the same functionality and attributes as their Aura counterparts. Some have subtle differences.

Lightning web components inherit global HTML attributes and events, making them more functional and better performing than their Aura counterparts. The Component Reference doesn’t list the global HTML attributes and events for each component. See Global Attributes and Events at MDN.

For component styling, the base Aura components and Lightning web components both support design variations and SLDS utility classes. The base Aura components also support custom styling with your own classes. However, Lightning web components follow shadow DOM standards, which prevent custom styling with your own classes. Some base LWC components support SLDS styling hooks for custom styling. See Style Components Using Lightning Design System Styling Hooks.

Beginning in Summer ’24, Aura components can also use styling hooks as described in Replace Design Tokens with Styling Hooks.

The following table lists usage differences between Aura base components and their Lightning web component counterparts. Aura components follow the name format namespace:componentName, with a colon that separates the namespace and component name. Lightning web components follow the name format namespace-component-name, with a dash that separates the namespace and component name.

Table 1. Mapping of Aura Components to Lightning Web Components

Namespace	Aura Component	Lightning Web Component	Differences
`lightning`	`accordion`	`accordion`	`lightning:accordion` supports the initialization of multiple open sections in simple markup. To initialize `lightning-accordion` with multiple open sections, pass the array of section names using JavaScript. For `lightning:accordion`, the `openSections` event parameter returns an array of strings even for a single open accordion section. For `lightning-accordion`, `openSections` returns a string only if you don't include the `allow-multiple-sections-open` attribute.
`lightning`	`accordionSection`	`accordion-section`	`lightning:accordionSection` supports custom menu `actions` through an actions attribute that passes in a `lightning:buttonMenu` component. The `title` attribute for the Aura component provides tooltip text when you hover over an accordion section. `lightning-accordion-section` supports custom menu actions through an `actions` slot for `lightning-button-menu`. The `title` attribute in the Lightning web component is currently reserved for internal use.
`lightning`	`avatar`	`avatar`	-
`lightning`	`badge`	`badge`	-
`lightning`	`breadcrumb`	`breadcrumb`	-
`lightning`	`breadcrumbs`	`breadcrumbs`	-
`lightning`	`button`	`button`	-
`lightning`	`buttonGroup`	`button-group`	-
`lightning`	`buttonIcon`	`button-icon`	`lightning-button-icon` doesn’t support `iconClass`.
`lightning`	`buttonIconStateful`	`button-icon-stateful`	-
`lightning`	`buttonMenu`	`button-menu`	`lightning:buttonMenu` doesn’t support the `onclick` and `onclose` event handlers.
`lightning`	`buttonStateful`	`button-stateful`	In `lightning:buttonStateful`, use the `state` attribute to show when the button is selected. In `lightning-button-stateful`, use the `selected` attribute.
`lightning`	`card`	`card`	In `lightning:card`, you can set the `title` and `footer` attributes as strings or objects, which enables you to pass components. You can use the `actions` attribute to specify a `lightning:button` or `lightning:buttonIcon` to display in the card’s header. In `lightning-card`, you can set the `title` and `footer` attributes to text only. To include markup or other components, use named slots. You can specify actions only in an `action` named slot.
`lightning`	`carousel`	`carousel`	-
`lightning`	`checkboxGroup`	`checkbox-group`	-
`lightning`	`clickToDial`	`click-to-dial`	-
`lightning`	`combobox`	`combobox`	-
`lightning`	`container`	-	Lightning web component not yet available.
`lightning`	`datatable`	`datatable`	`lightning:datatable` doesn’t support custom data types in table cells. `lightning:datatable` supports custom CSS classes for styling a column of standard data types only. `lightning-datatable` supports custom data types in table cells. `lightning-datatable` supports custom CSS classes for styling a column for custom data types only.
`lightning`	`dualListbox`	`dual-listbox`	-
`lightning`	`dynamicIcon`	`dynamic-icon`	-
`lightning`	`fileCard`	-	Lightning web component not yet available.
`lightning`	`fileUpload`	`file-upload`	-
`lightning`	`flexipageRegionInfo`	-	In Aura, use `flexipageRegionInfo` to make the containing component aware of the width it can occupy. In Lightning web components, use the `flexipageRegionWidth` public property for this purpose. See Make a Component Width-Aware.
`lightning`	`flow`	`flow`	See Create and Start a Flow in a Custom LWC.
`lightning`	`formattedAddress`	`formatted-address`	-
`lightning`	`formattedDateTime`	`formatted-date-time`	In `lightning:formattedDateTime`, set the `hour12` attribute using true or false strings or a variable. In `lightning-formatted-number`, set the `hour12` attribute only by using a variable. Strings are always interpreted as true.
`lightning`	`formattedEmail`	`formatted-email`	-
`lightning`	`formattedLocation`	`formatted-location`	-
`lightning`	`formattedName`	`formatted-name`	-
`lightning`	`formattedNumber`	`formatted-number`	In `lightning:formattedNumber`, use the `style` attribute to specify the type of number to display. In `lightning-formatted-number`, use the `format-style` attribute for this purpose.
`lightning`	`formattedPhone`	`formatted-phone`	-
`lightning`	`formattedRichText`	`formatted-rich-text`	-
`lightning`	`formattedText`	`formatted-text`	-
`lightning`	`formattedTime`	`formatted-time`	-
`lightning`	`formattedUrl`	`formatted-url`	-
`lightning`	`helptext`	`helptext`	-
`lightning`	`icon`	`icon`	-
`lightning`	`input`	`input`	-
`lightning`	`inputAddress`	`input-address`	-
`lightning`	`inputField`	`input-field`	`lightning:inputField` doesn’t provide a way to indicate that a field has been modified but not saved. `lightning-input-field` supports a `dirty` attribute to indicate that the field has been modified by the user but not saved or submitted. For more information, see the `recordEditForm` differences. `lightning:inputField` supports the `readonly` attribute but `lightning-input-field` supports both `readonly` and `read-only`.
`lightning`	`inputLocation`	`input-location`	-
`lightning`	`inputName`	`input-name`	-
`lightning`	`inputRichText`	`input-rich-text`	`lightning:inputRichText` requires you to use the `lightning:insertImageButton` child component to add an insert image button. It doesn’t support an insert link button or custom buttons. `lightning-input-rich-text` provides buttons to insert images and links. `lightning-input-rich-text` supports adding custom buttons with the components `lightning-rich-text-toolbar-button-group` and `lightning-rich-text-toolbar-button` (beta).
`lightning`	`insertImageButton`	-	An insert image button is supported in `lightning-input-rich-text` so you don’t need `lightning:insertImageButton`.
`lightning`	`layout`	`layout`	`lightning:layout` allows HTML tags, text, expressions, and other components between `lightning:layoutItem` components. `lightning-layout` does not allow expressions or other components between `lightning-layout-item` components. However, you can place HTML tags and text between `lightning-layout-item` components.
`lightning`	`layoutItem`	`layout-item`	See the differences for `lightning-layout`.
`lightning`	`listView`	-	Lightning web component not yet available.
`lightning`	`map`	`map`	-
`lightning`	`menuItem`	`menu-item`	-
`lightning`	`navigation`	`navigation` module	In an Aura component, use the `lightning:navigation` component to access the navigation service. In a Lightning web component, import the `lightning/navigation` module in the component’s JavaScript. See Navigate to Pages, Records, and Lists.
`lightning`	`notificationsLibrary`	`platformShowToastEvent` module	In Aura components, add the `notificationsLibrary` component to create notices and toasts. The library provides `showToast` and `showNotice` events. In Lightning web components, import the `lightning/platformShowToastEvent` module in your component’s JavaScript. The module provides an event named `ShowToastEvent`. LWC doesn’t support notices yet. `ShowToastEvent` supports the same parameters, modes, and variants as Aura’s `showToast`. See Toast Notifications.
`lightning`	`outputField`	`output-field`	See `recordViewForm` differences.
`lightning`	`overlayLibrary`	-	In Aura components, add the `overlayLibrary` component to create modal dialogs and popovers. The library provides `showCustomModal()`, `showCustomPopover()`, and `notifyClose()` methods.
`lightning`	`path`	-	Lightning web component not yet available.
`lightning`	`picklistPath`	-	Lightning web component not yet available.
`lightning`	`pill`	`pill`	`lightning:pill` requires the `media` attribute to include an avatar or icon. The `variant` attribute is not available on `lightning:pill`. `lightning-pill` can accept avatars and icons as nested components.
`lightning`	`pillContainer`	`pill-container`	-
`lightning`	`progressBar`	`progress-bar`	-
`lightning`	`progressIndicator`	`progress-indicator`	-
`lightning`	`progressRing`	`progress-ring`	-
`lightning`	`quipCard`	-	Lightning web component not yet available.
`lightning`	`radioGroup`	`radio-group`	-
`lightning`	`recordEditForm`	`record-edit-form`	`lightning:recordEditForm` doesn’t require you to nest `lightning:inputField` components directly in it. You can nest `lightning:inputField` components in HTML tags or other components such as `lightning:layout` to tailor the layout. `lightning-input-field` is intended to be used as a child of `lightning-record-edit-form`. You can nest `lightning-input-field` in HTML tags or another base component such as `lightning-layout` within `lightning-record-edit-form`. However, you can’t nest `lightning-input-field` in a custom component.
`lightning`	`recordForm`	`record-form`	-
`lightning`	`recordViewForm`	`record-view-form`	`lightning:recordViewForm` doesn’t require you to nest `lightning:outputField` components directly in it, although this is the expected usage. `lightning-output-field` must be a child of `lightning-record-view-form`. Don’t nest `lightning-output-field` in another element like `lightning-layout`. You can place it in a container such as within `lightning-record-view-form`.
`lightning`	`relativeDateTime`	`relative-date-time`	-
`lightning`	`select`	-	Lightning web component not yet available. In a mobile environment, use the native `<select>` element.In a desktop environment, consider using the `lightning-combobox` Lightning web component. To support multiple selection, use `lightning-dual-listbox`.
`lightning`	`slider`	`slider`	-
`lightning`	`spinner`	`spinner`	-
`lightning`	`tab`	`tab`	In `lightning:tab`, use the `id` attribute to assign a string to identify a tab. In `lightning-tab`, use the `value` attribute to assign the tab identifier. The `tabset` uses these strings to determine which tab was clicked.
`lightning`	`tabset`	`tabset`	`lightning:tabset` uses the `selectedTabId` attribute to specify the open tab. `lightning-tabset` uses the `active-tab-value attribute`.
`lightning`	`textarea`	`textarea`	-
`lightning`	`tile`	`tile`	In `lightning:tile`, you can use `<aura:set\>` to add a `media` attribute that contains an avatar component or icon component. In `lightning-tile`, specify the avatar and icon components with `media` named slots.
`lightning`	`tree`	`tree`	-
`lightning`	`treeGrid`	`tree-grid`	-
`lightning`	`unsavedChanges`	-	Lightning web component not yet available.
`lightning`	`verticalNavigation`	`vertical-navigation`	-
`lightning`	`verticalNavigationItem`	`vertical-navigation-item`	-
`lightning`	`verticalNavigationItemBadge`	`vertical-navigation-item-badge`	-
`lightning`	`verticalNavigationItemIcon`	`vertical-navigation-item-icon`	-
`lightning`	`verticalNavigationItemOverflow`	`vertical-navigation-item-overflow`	-
`lightning`	`verticalNavigationSection`	`vertical-navigation-section`	-
`aura`	`expression`	Custom JavaScript	See Migrate Expressions.
`aura`	`html`	-	N/A
`aura`	`if`	`lwc:if / lwc:elseif / lwc:else`	See Migrate Conditionals.
`aura`	`iteration`	`for:each`	See Migrate Iterations.
`aura`	`renderIf`	`lwc:if / lwc:elseif / lwc:else`	See Migrate Conditionals.
`aura`	`template`	-	N/A
`aura`	`text`	-	N/A
`aura`	`token`	-	N/A
`aura`	`unescapedHTML`	-	N/A
`force`	`canvasApp`	-	N/A
`force`	`inputField`	`input-field`	`force:inputField` has been replaced by `lightning:inputField` in Aura. To create editable fields based on field types, use `lightning:inputField` with `lightning:recordEditForm` or their Lightning web component counterparts.
`force`	`outputField`	`output-field`	`force:outputField` has been replaced by `lightning:outputField` in Aura. To create read-only fields based on field types, use `lightning:outputField` with `lightning:recordViewForm` or their Lightning web component counterparts.
`force`	`recordData`	`@wire`	See Understand the Wire Service.
`force`	`recordEdit`	`record-edit-form`	`force:recordEdit` has been replaced by `lightning:recordEditForm`.
`force`	`recordView`	`record-view-form`	`force:recordView` has been replaced by `lightning:recordViewForm`.
`ltng`	`require`	`platformResourceLoader` module	In Aura components, add the `<ltng:require>` tag to your component markup to reference external static resources. In Lightning web components, import the `lightning/platformResourceLoader` module in your component’s JavaScript. See Use Third-Party JavaScript Libraries.

See Also