Base components that are UI-based are built from Salesforce Lightning Design System (SLDS) design guidelines. While base components follow SLDS guidelines closely, they don’t implement every guideline or every feature on a design. You can also find subtle differences in attribute or variant names across base components and their associated SLDS guidelines.
Base components support SLDS 2 for advanced theming and branding capabilities.
Use base components where possible instead of creating your own component from an SLDS guideline. Using base components, you get the latest SLDS design updates automatically.
Note
Base components for LWC use the framework’s capabilities for a seamless integration with Salesforce data, making it easy for you to build dynamic and interactive apps. If a base component doesn’t support a feature that you see in an SLDS guideline, use the guideline to help you achieve your requirements.
Base components are not currently versioned. Most base components were first available in Spring ’19 (API version 45.0). To develop using LWC, set your custom component to use API version 45.0 or later in the component’s .js-meta.xml file. See Minimum API Version of Base Components.
Base components are in the lightning namespace and follow the format lightning-component-name in HTML markup, such as lightning-button-group, for example. Base components are grouped using these categories.
Base components can compose another base component, such as lightning-button in lightning-button-group, or lightning-accordion-section in lightning-accordion. Base components also include utility modules that provide additional functionalities and utility methods.
Action and menu components trigger an action when clicked.
| Base Component | SLDS Design Guideline | Base Component Usage Highlights | First Available in API Version |
|---|---|---|---|
button | Buttons | Use variants to change the background color of the button. | 45.0 |
button-group | Button Groups | Compose other button components to create a group of buttons. | 45.0 |
button-icon | Button Icons | The stateful variation type maps to lightning-button-icon-stateful component. | 45.0 |
button-icon-stateful | Button Icons (Stateful) | Toggle between two states using the selected and onclick attributes. | 45.0 |
button-menu | Menus | Compose lightning-menu-* components to display a menu with a list of actions. | 45.0 |
menu-divider | Menus | Group related lightning-menu-item components by using a divider. | 45.0 |
menu-item | Menus | Compose a menu item within lightning-button-menu. | 45.0 |
menu-subheader | Menus | Compose a subheader within lightning-button-menu. | 45.0 |
button-stateful | Buttons (Stateful) | Toggle between two states using the selected and onclick attributes. | 45.0 |
click-to-dial | - | Display a phone number for Open CTI and Voice. | 45.0 |
flow | - | Display a flow interview. | 45.0 |
Container components group related content together.
| Base Component | SLDS Design Guideline | Base Component Usage Highlights | First Available in API Version |
|---|---|---|---|
accordion | Accordion | Display content that’s collapsed or expanded in a lightning-accordion-section component. | 45.0 |
accordion-section | Accordion | Compose multiple lightning-accordion-section components within lightning-accordion. | 45.0 |
card | Cards | When implementing a nested card, lightning-card must be nested directly within lightning-card. Placing a datatable or tiles in a card requires your own customization. | 45.0 |
carousel | Carousel | Display content that cycles through different views. | 45.0 |
carousel-image | Carousel | Compose a carousel image within the lightning-carousel component. | 45.0 |
modal | Modals | Display content that blocks interaction with everything else on the page until the modal is dismissed. | 55.0 |
modal-body | Modals | Display content in the modal body. lightning-modal-body doesn’t allow customizing of the styling on the white modal frame and background, close button, or gray backdrop. | 55.0 |
modal-footer | Modals | Display an optional footer on the lightning-modal component. | 55.0 |
modal-header | Modals | Display an optional header on the lightning-modal component. | 55.0 |
quick-action-panel | Modals | Use lightning-quick-action-panel as a modal that’s opened by a quick action. | 52.0 |
layout | Grid | Display content in lightning-layout to use the responsive grid system. | 45.0 |
layout-item | Grid | Compose multiple lightning-layout-item components within lightning-layout. | 45.0 |
tab | Tabs | A single tab in a tabset. | 44.0 |
tabset | Tabs | Represents a list of tabs. | 44.0 |
tile | Tiles | Use the media slot to insert an icon or avatar on lightning-tile. The media slot doesn’t support inserting a checkbox. | 45.0 |
Visual components display images, icons, and other visual elements.
| Base Component | SLDS Design Guideline | Base Component Usage Highlights | First Available in API Version |
|---|---|---|---|
avatar | Avatars | Display an image or icon. You can also use a static resource in your org. | 45.0 |
badge | Badge | Display a text-only badge or a badge with text and an icon. | 45.0 |
dynamic-icon | Dynamic Icons | Display an animated icon that provides a visual cue for a specific action or state. | 45.0 |
helptext | Tooltips | Display contextual information, activated by hover, focus, or click. | 45.0 |
icon | Icons | Display an SLDS icon or provide your own using SVG code. | 45.0 |
map | Map | Display a map of one or more locations using Google Maps API. | 45.0 |
pill | Pills | Display a compact label with text and an icon that a user can add and remove easily. | 45.0 |
pill-container | Display pill items in a container. | 45.0 |
Input components are for data entry with input validation support.
| Base Component | SLDS Design Guideline | Base Component Usage Highlights | First Available in API Version |
|---|---|---|---|
checkbox-group | Checkbox (Group) | A group of checkboxes for single or multiple selection. | 45.0 |
combobox | Combobox | A selector for single selection. Use lightning-record-picker for record lookup. | 45.0 |
dual-listbox | Dueling Picklist | Two side-by-side listboxes for selecting one or more options in the list on the left. Move selected options to the list on the right. | 45.0 |
file-upload | File Selector | A file selector for uploading a file that’s associated with a record ID. To upload a file without a record ID, use lightning-input with type="file" instead. | 45.0 |
input | Input | An input field based on the type attribute. Provides basic data validation and custom error message support. | 45.0 |
input type="checkbox" | Checkbox | A checkbox for single selection. | 45.0 |
input type="checkbox-button" | Checkbox Button | A styled checkbox to convey whether an option has been selected. | 45.0 |
input type="date" | Datepickers | An input field that provides date selection from a calendar. | 45.0 |
input type="datetime" | Datetime Picker | Input fields for selecting a date and time. | 45.0 |
input type="time" | Timepicker | An input field that provides time selection from a list of predefined time. | 45.0 |
input type="email" | Input | An input field for entering an email address. | 45.0 |
input type="file" | File Selector | A file selector. To upload a file and associate it with a record, use lightning-file-upload instead. | 45.0 |
input type="password" | Input | An input field for entering a password. | 45.0 |
input type="search" | Input | An input field for entering a search term. | 45.0 |
input type="tel" | Input | An input field for entering a telephone number. | 45.0 |
input type="url" | Input | An input field for entering a URL. | 45.0 |
input type="number" | Input | An input field for entering a number. | 45.0 |
input type="text" | Input | An input field for entering text. | 45.0 |
input type="toggle" | Checkbox Toggle | A styled checkbox that’s displayed as a toggle to convey if an option is selected. | 45.0 |
input-address | Form Element (Address) | A group of fields for entering an address. | 45.0 |
input-location | Form Element (Compound) | A pair of fields for entering a latitude and longitude. | 45.0 |
input-name | Form Element (Compound) | A group of fields for entering a name, including a salutation, first, middle, and last name. | 45.0 |
input-rich-text | Rich Text Editor | An editor for entering rich text. To create a custom toolbar button, use the lightning-rich-text-toolbar-button component. | 45.0 |
rich-text-toolbar-button | Button Icons | A custom toolbar button for the rich text editor. | 49.0 |
rich-text-toolbar-button-group | Button Groups | A group of custom toolbar buttons. Compose multiple lightning-rich-text-toolbar-button components within lightning-rich-text-toolbar-button-group. | 49.0 |
radio-group | Radio Group | A group of radio buttons for single selection. | 45.0 |
record-picker | Lookups | Grouped and multi entity variants aren’t available for lightning-record-picker. | 59.0 |
select | Select | For multiple selection, use the multiple attribute or use lightning-dual-listbox instead. | 59.0 |
slider | Slider | An input field for searching Salesforce records. | 45.0 |
textarea | Textarea | A textarea field for entering multi-line text. | 45.0 |
Form components facilitate record creation, display, and editing.
| Base Component | SLDS Design Guideline | Base Component Usage Highlights | First Available in API Version |
|---|---|---|---|
input-field | Form Element (Record Form) | Compose multiple lightning-input-field components within lightning-record-edit-form. | 45.0 |
output-field | Form Element (Record Form) | Compose multiple lightning-output-field components within lightning-record-view-form. | 45.0 |
record-edit-form | Form Element (Record Form) | A record edit layout that displays one or more fields using lightning-input-field. | 45.0 |
record-form | Form Element (Record Form) | A form for record editing or record display. | 45.0 |
record-view-form | Form Element (Record Form) | A record view layout that displays one or more fields using lightning-output-field. | 45.0 |
Navigation components help users move between pages.
| Base Component | SLDS Design Guideline | Base Component Usage Highlights | First Available in API Version |
|---|---|---|---|
breadcrumbs | Breadcrumbs | A hierarchy path of the page you’re on. The SLDS overflow variant isn’t available for lightning-breadcrumbs. | 45.0 |
breadcrumb | Breadcrumbs | Compose multiple lightning-breadcrumb components within lightning-breadcrumbs. | 45.0 |
vertical-navigation | Vertical Navigation | A list of links that can contain text with badges and text with icons. | 45.0 |
vertical-navigation-item | Vertical Navigation | A link within a list. Compose multiple lightning-vertical-navigation-item components within lightning-vertical-navigation. | 45.0 |
vertical-navigation-item-badge | Vertical Navigation | A link with a badge. Compose multiple lightning-vertical-navigation-item-badge components within lightning-vertical-navigation. | 45.0 |
vertical-navigation-item-icon | Vertical Navigation | A link with an icon. Compose multiple lightning-vertical-navigation-item-icon components within lightning-vertical-navigation. | 45.0 |
Status and notification components deliver information and insights.
| Base Component | SLDS Design Guideline | Base Component Usage Highlights | First Available in API Version |
|---|---|---|---|
lightning/alert | Prompt | Displays content in a modal to communicate a state that affects the system. | 54.0 |
lightning/confirm | Prompt | Displays content in a modal that asks the user to respond before they can continue. | 54.0 |
lightning/platformShowToastEvent | Toast | Displays a toast notification using an event-based mechanism. lightning/platformShowToastEvent isn’t supported in LWR sites. | 45.0 |
lightning/prompt | Prompt | Displays content in a modal to ask for user input. | 54.0 |
lightning/toast | Toast | Displays a toast notification. lightning/toast is also supported in LWR sites. | 59.0 |
lightning/toastContainer | Toast | Manages toast components by specifying the position and the maximum number that can be displayed. | 58.0 |
Output components display formatted data based on user locale and language. They don’t correspond to an SLDS design and can be used wherever data is displayed.
| Base Component | Base Component Usage Highlights | First Available in API Version |
|---|---|---|
formatted-address | An address with a link to the given location on Google Maps. You can display a static map with the address for better context. | 45.0 |
formatted-date-time | A date and time that’s formatted based on the user’s locale. | 45.0 |
formatted-email | An email address that’s displayed with or without an email icon. | 45.0 |
formatted-location | A latitude and longitude value that represents a geolocation. | 45.0 |
formatted-name | A name that’s formatted based on the user’s locale. | 45.0 |
formatted-number | A number that’s formatted based on the user’s locale. | 45.0 |
formatted-phone | A phone number that’s formatted based on the user’s locale. | 45.0 |
formatted-rich-text | Text that’s formatted by HTML, such as bold formatting and links. | 45.0 |
formatted-text | Text that can include links and newline characters for line breaks. | 45.0 |
formatted-time | Time that’s formatted based on the user’s locale. | 45.0 |
formatted-url | Text that can include a URL. | 45.0 |
relative-date-time | The relative time difference between the source date-time and the provided date-time. | 45.0 |
Progress components convey the progress of a process.
| Base Component | SLDS Design Guideline | Base Component Usage Highlights | First Available in API Version |
|---|---|---|---|
progress-bar | Progress Bar | A horizontal progress bar that indicates the progress of an operation. | 45.0 |
progress-indicator | Progress Indicator | A visual indication made up of steps that indicates the progress of a process. The vertical variant isn’t available for lightning-progress-indicator. | 45.0 |
progress-step | Compose multiple lightning-progress-step components within lightning-progress-indicator. | 45.0 | |
progress-ring | Progress Ring | A circular progress indicator that provides feedback about an action or progress. | 48.0 |
spinner | Spinners | An animated spinner that indicates that a feature or page is loading. | 45.0 |
Table and tree components can display a large amount of data that can be expanded or collapsed.
| Base Component | SLDS Design Guideline | Base Component Usage Highlights | First Available in API Version |
|---|---|---|---|
datatable | Data Tables | A table that displays rows and columns of data. To create striped rows on lightning-datatable, use the slds-table_striped class. lightning-datatable highlights a row on hover and doesn’t currently support slds-no-row-hover. | 45.0 |
tree | Trees | A list of items that can nest other items, which can be expanded or collapsed. | 45.0 |
tree-grid | Tree Grid | A table with rows of data that can be expanded or collapsed. Removing the borders on rows isn’t available for lightning-tree-grid. | 45.0 |
Utility modules provide additional functionalities and utility methods. They don’t correspond to an SLDS design. To use a module in your JavaScript file, import its functions from the module.
| Base Component | Description | First Available in API Version |
|---|---|---|
lightning/flowSupport | Controls a flow navigation | 45.0 |
lightning/logger | Logs custom messages to Event Monitoring | 45.0 |
lightning/mediaUtils | Resizes and compresses image files | 45.0 |
lightning/messageService | Communicates across the DOM between Visualforce pages, Aura components and LWC | 47.0 |
lightning/navigation | Navigates to another page in an app, such as in Lightning Experience and Experience Builder sites | 45.0 |
lightning/pageReferenceUtils | Encodes and decodes default field values | 48.0 |
lightning/platformResourceLoader | Imports a third-party JavaScript or CSS library from a static resource | 45.0 |
lightning/refresh | Refreshes component data without reloading an entire page | 55.0 |
lightning/userConsentCookie | Sets cookie consent preferences | 53.0 |
For LWC API modules that provide access to record data and Salesforce APIs, see LWC API Modules.
See Also
Release Preview
j
