Base Components: Migrate ui components

Aura 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 ComponentLWCUsage
ui:actionMenuItemlightning-button-menuUse lightning-menu-item with lightning-button-menu instead.
ui:buttonlightning-button-*Use lightning-button, lightning-button-icon, or lightning-button-icon-stateful. For button groups, use lightning-button-group.
ui:checkboxMenuItemlightning-button-menuUse lightning-menu-item with lightning-button-menu instead.
ui:inputCheckboxlightning-inputUse lightning-input with checkbox, toggle, or checkbox-button type instead. For checkbox groups, use lightning-checkbox-group.
ui:inputCurrencylightning-inputUse lightning-input with number type and currency formatter instead.
ui:inputDatelightning-inputUse lightning-input with date type instead.
ui:inputDateTimelightning-inputUse lightning-input with datetime type instead.
ui:inputDefaultErrorlightning-inputUse lightning-input with built-in field validation instead.
ui:inputEmaillightning-inputUse lightning-input with email type instead.
ui:inputNumberlightning-inputUse lightning-input with number type instead.
ui:inputPhonelightning-inputUse lightning-input with phone type instead.
ui:inputRadiolightning-inputUse lightning-input with radio type instead. For radio groups, use lightning-radio-group.
ui:inputRichTextlightning-input-rich-textUse lightning-input-rich-text instead. To create custom toolbar buttons, use lightning-rich-text-toolbar-button-group.
ui:inputSecretlightning-inputUse lightning-input with password type instead.
ui:inputSelectlightning-combobox or lightning-selectTo 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:inputSelectOptionlightning-combobox or lightning-selectTo 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:inputTextlightning-inputUse lightning-input with text type instead.
ui:inputTextArealightning-textareaUse lightning-textarea instead.
ui:inputURLlightning-inputUse lightning-input with url type instead.
ui:menulightning-button-menuUse lightning-menu-item with lightning-button-menu instead.
ui:menuItemlightning-button-menuUse lightning-menu-item with lightning-button-menu instead.
ui:menuItemSeparatorlightning-button-menuUse lightning-menu-divider with lightning-button-menu instead.
ui:menuListlightning-button-menuUse lightning-menu-item with lightning-button-menu instead.
ui:menuTriggerlightning-button-menuUse lightning-menu-item with lightning-button-menu instead.
ui:menuTriggerLinklightning-button-menuUse lightning-menu-item with lightning-button-menu instead.
ui:messagelightning/platformShowToastEventUse lightning/toast with lightning/toastContainer in LWR sites.
ui:outputCheckboxlightning-inputUse lightning-input with checkbox type and set readonly to true.
ui:outputCurrencylightning-formatted-numberUse lightning-formatted-number with style set to currency.
ui:outputDatelightning-formatted-date-timeUse lightning-formatted-date-time instead.
ui:outputDateTimelightning-formatted-date-timeTo include the date in the output, use lightning-formatted-date-time. Otherwise, use lightning-formatted-time.
ui:outputEmaillightning-formatted-emailUse lightning-formatted-email instead.
ui:outputNumberlightning-formatted-numberUse lightning-formatted-number instead.
ui:outputPhonelightning-formatted-phoneUse lightning-formatted-phone instead.
ui:outputRichTextlightning-formatted-rich-textUse lightning-formatted-rich-text instead.
ui:outputTextlightning-formatted-textUse lightning-formatted-text instead.
ui:outputTextArealightning-formatted-textUse lightning-formatted-text instead.
ui:outputURLlightning-formatted-urlThere are several ways to work with links.
  • Custom onclick event handler: Use the HTML anchor tag <a>
  • Navigate in Lightning Experience: Use lightning-navigation
  • Email address with mailto: protocol: Use lightning-formatted-email
  • Phone number with the tel: protocol: Use lightning-formatted-phone
ui:radioMenuItemlightning-button-menuUse lightning-menu-item with lightning-button-menu instead.
ui:spinnerlightning-spinnerUse lightning-spinner instead.

See Also

Base Components: Aura Vs Lightning Web Components