ui componentsAura components in the ui namespace are deprecated. Support for these deprecated components ended on May 1, 2021.
When you migrate Aura components from the lightning and ui namespaces, use its LWC equivalent. For example, replace ui:button and lightning:button with the LWC equivalent: lightning-button, lightning-button-icon, or lightning-button-icon-stateful.
Table 1. Mapping of Aura components in the ui namespace
| Aura Component | LWC | Usage |
|---|---|---|
| ui:actionMenuItem | lightning-button-menu | Use lightning-menu-item with lightning-button-menu instead. |
| ui:button | lightning-button-* | Use lightning-button, lightning-button-icon, or lightning-button-icon-stateful. For button groups, use lightning-button-group. |
| ui:checkboxMenuItem | lightning-button-menu | Use lightning-menu-item with lightning-button-menu instead. |
| ui:inputCheckbox | lightning-input | Use lightning-input with checkbox, toggle, or checkbox-button type instead. For checkbox groups, use lightning-checkbox-group. |
| ui:inputCurrency | lightning-input | Use lightning-input with number type and currency formatter instead. |
| ui:inputDate | lightning-input | Use lightning-input with date type instead. |
| ui:inputDateTime | lightning-input | Use lightning-input with datetime type instead. |
| ui:inputDefaultError | lightning-input | Use lightning-input with built-in field validation instead. |
| ui:inputEmail | lightning-input | Use lightning-input with email type instead. |
| ui:inputNumber | lightning-input | Use lightning-input with number type instead. |
| ui:inputPhone | lightning-input | Use lightning-input with phone type instead. |
| ui:inputRadio | lightning-input | Use lightning-input with radio type instead. For radio groups, use lightning-radio-group. |
| ui:inputRichText | lightning-input-rich-text | Use lightning-input-rich-text instead. To create custom toolbar buttons, use lightning-rich-text-toolbar-button-group. |
| ui:inputSecret | lightning-input | Use lightning-input with password type instead. |
| ui:inputSelect | lightning-combobox or lightning-select | To create a list of options for single selection, use lightning-combobox. To enable single and multiple selection on a menu of options, use lightning-select. |
| ui:inputSelectOption | lightning-combobox or lightning-select | To create a list of options for single selection, use lightning-combobox. To enable single and multiple selection on a menu of options, use lightning-select. |
| ui:inputText | lightning-input | Use lightning-input with text type instead. |
| ui:inputTextArea | lightning-textarea | Use lightning-textarea instead. |
| ui:inputURL | lightning-input | Use lightning-input with url type instead. |
| ui:menu | lightning-button-menu | Use lightning-menu-item with lightning-button-menu instead. |
| ui:menuItem | lightning-button-menu | Use lightning-menu-item with lightning-button-menu instead. |
| ui:menuItemSeparator | lightning-button-menu | Use lightning-menu-divider with lightning-button-menu instead. |
| ui:menuList | lightning-button-menu | Use lightning-menu-item with lightning-button-menu instead. |
| ui:menuTrigger | lightning-button-menu | Use lightning-menu-item with lightning-button-menu instead. |
| ui:menuTriggerLink | lightning-button-menu | Use lightning-menu-item with lightning-button-menu instead. |
| ui:message | lightning/platformShowToastEvent | Use lightning/toast with lightning/toastContainer in LWR sites. |
| ui:outputCheckbox | lightning-input | Use lightning-input with checkbox type and set readonly to true. |
| ui:outputCurrency | lightning-formatted-number | Use lightning-formatted-number with style set to currency. |
| ui:outputDate | lightning-formatted-date-time | Use lightning-formatted-date-time instead. |
| ui:outputDateTime | lightning-formatted-date-time | To include the date in the output, use lightning-formatted-date-time. Otherwise, use lightning-formatted-time. |
| ui:outputEmail | lightning-formatted-email | Use lightning-formatted-email instead. |
| ui:outputNumber | lightning-formatted-number | Use lightning-formatted-number instead. |
| ui:outputPhone | lightning-formatted-phone | Use lightning-formatted-phone instead. |
| ui:outputRichText | lightning-formatted-rich-text | Use lightning-formatted-rich-text instead. |
| ui:outputText | lightning-formatted-text | Use lightning-formatted-text instead. |
| ui:outputTextArea | lightning-formatted-text | Use lightning-formatted-text instead. |
| ui:outputURL | lightning-formatted-url | There are several ways to work with links.
|
| ui:radioMenuItem | lightning-button-menu | Use lightning-menu-item with lightning-button-menu instead. |
| ui:spinner | lightning-spinner | Use lightning-spinner instead. |
See Also
Base Components: Aura Vs Lightning Web Components
j