Migrate Components from the ui Namespace

If you’re using components in the ui namespace, replace them with their lightning namespace counterparts.

Components in the ui namespace are deprecated as of API version 47.0, the Winter ’20 release. We recommend that you use components in the lightning namespace instead or use the Lightning web component equivalent. You can continue to use the ui components beyond Summer ’21 but Salesforce plans to cease support for them in Summer ’21. For more information, see Working with Lightning Base Components.

Note

For migration recommendations for each ui component, refer to the Component Library. For example, the ui:button specification notes that you can use lightning:button, lightning:buttonIcon, or lightning:buttonIconStateful instead, depending on your use case. To view examples and usage guidelines for lightning namespace components, refer to the Component Library.

The following tables list ui components and their recommended counterparts in the lightning namespace.

Complex, Interactive Components 

The following components contain one or more subcomponents and are interactive.

Typeui Component (Deprecated)Descriptionlightning Component
Messageui:messageA message notification of varying severity levelslightning:notificationsLibrary
Menuui:menuA dropdown list with a trigger that controls its visibilitylightning:buttonMenu
 ui:menuListA list of menu items 
 ui:actionMenuItemA menu item that triggers an actionlightning:menuItem
 ui:checkboxMenuItemA menu item that supports multiple selection and can be used to trigger an action 
 ui:radioMenuItemA menu item that supports single selection and can be used to trigger an action 
 ui:menuItemSeparatorA visual separator for menu itemslightning:menuDivider
 ui:menuItemAn abstract and extensible component for menu items in a ui:menuList componentlightning:menuItem
 ui:menuTriggerA trigger that expands and collapses a menulightning:buttonMenu
 ui:menuTriggerLinkA link that triggers a dropdown menu. This component extends ui:menuTrigger 

Input Control Components 

The following components are interactive, for example, like buttons and checkboxes.

TypeKey Components (Deprecated)Descriptionlightning Component
Buttonui:buttonAn actionable button that can be pressed or clickedlightning:button, lightning:buttonIcon, or lightning:buttonIconStateful
Checkboxui:inputCheckboxA selectable option that supports multiple selectionslightning:input with checkbox, toggle, or checkbox-button type
 ui:outputCheckboxDisplays a read-only value of the checkboxlightning:input with checkbox type and readonly attribute
Radio buttonui:inputRadioA selectable option that supports only a single selectionlightning:input with radio type or lightning:radioGroup
Dropdown Listui:inputSelectA dropdown list with optionslightning:combobox
 ui:inputSelectOptionAn option in a ui:inputSelect component 

Visual Components 

The following components provide informative cues, for example, like error messages and loading spinners.

TypeKey Components (Deprecated)Descriptionlightning Component
Field-level errorui:inputDefaultErrorAn error message that is displayed when an error occurslightning:input with field validation
Spinnerui:spinnerA loading spinnerlightning:spinner

Field Components 

The following components enable you to enter or display values.

TypeKey Components (Deprecated)Descriptionlightning Component
Currencyui:inputCurrencyAn input field for entering currencylightning:input with number type and currency formatter
 ui:outputCurrencyDisplays currency in a default or specified formatlightning:formattedNumber with currency style
Emailui:inputEmailAn input field for entering an email addresslightning:input with email type
 ui:outputEmailDisplays a clickable email addresslightning:formattedEmail
Date and timeui:inputDateAn input field for entering a datelightning:input with date type
 ui:inputDateTimeAn input field for entering a date and timelightning:input with datetime type
 ui:outputDateDisplays a date in the default or specified formatlightning:formattedDateTime
 ui:outputDateTimeDisplays a date and time in the default or specified formatlightning:formattedDateTime or lightning:formattedTime
Passwordui:inputSecretAn input field for entering secret textlightning:input with password type
Phone Numberui:inputPhoneAn input field for entering a phone numberlightning:input with phone type
 ui:outputPhoneDisplays a phone numberlightning:formattedPhone
Numberui:inputNumberAn input field for entering a numerical valuelightning:input with number type
 ui:outputNumberDisplays a numberlightning:formattedNumber
Rangeui:inputRangeAn input field for entering a value within a rangelightning:slider
Rich Textui:inputRichTextAn input field for entering rich textlightning:inputRichText
 ui:outputRichTextDisplays rich textlightning:formattedRichText
Textui:inputTextAn input field for entering a single line of textlightning:input
 ui:outputTextDisplays textlightning:formattedText
Text Areaui:inputTextAreaAn input field for entering multiple lines of textlightning:textarea
 ui:outputTextAreaDisplays a read-only text arealightning:formattedText
URLui:inputURLAn input field for entering a URLlightning:input with url type
 ui:outputURLDisplays a clickable URLlightning:formattedUrl