--- schema_version: "1" id: 556904da83a0f3c5bc1cb78a64cb9015c5863848dbe1722e8fff1fa09a350743 title: Components collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/components.md canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/components.html source_site: developer.salesforce.com content_type: documentation content_hash: 48a2c421e7ba46b1ebb1863e1f54cbfb9685014593182e7063e80964a3029120 products: - Lightning Component Reference --- # Components Salesforce provides prebuilt components that use the Lightning Web Components (LWC) programming model. Components in the `lightning` namespace are known as Lightning base components. They implement Salesforce Lightning Design System (SLDS) component designs and blueprints. Lightning base components include the components listed here, and the Aura components listed in [Aura Components in `lightning` Namespace](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/aura/components/aura-lightning.md) section. Use these functional categories to help choose the right base component for your use case. ## Actions and Menus Action and menu components trigger an action when you click them. - [Button](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/button/lightning-button.md) - [Button Group](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/buttonGroup/lightning-button-group.md) - [Button Icon](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/buttonIcon/lightning-button-icon.md) - [Button Icon Stateful](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/buttonIconStateful/lightning-button-icon-stateful.md) - [Button Menu](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/buttonMenu/lightning-button-menu.md) - [Menu Divider](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/menuDivider/lightning-menu-divider.md) - [Menu Item](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/menuItem/lightning-menu-item.md) - [Menu Subheader](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/menuSubheader/lightning-menu-subheader.md) - [Button Stateful](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/buttonStateful/lightning-button-stateful.md) - [Click To Dial](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/clickToDial/lightning-click-to-dial.md) - [Flow](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/flow/lightning-flow.md) ## Containers Container components group related content together. - [Accordion](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/accordion/lightning-accordion.md) - [Accordion Section](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/accordionSection/lightning-accordion-section.md) - [Card](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/card/lightning-card.md) - [Carousel](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/carousel/lightning-carousel.md) - [Carousel Image](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/carouselImage/lightning-carousel-image.md) - [Layout](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/layout/lightning-layout.md) - [Layout Item](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/layoutItem/lightning-layout-item.md) - [Modal](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/modal/lightning-modal.md) - [Modal Body](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/modalBody/lightning-modal-body.md) - [Modal Footer](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/modalFooter/lightning-modal-footer.md) - [Modal Header](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/modalHeader/lightning-modal-header.md) - [Quick Action Panel](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/quickActionPanel/lightning-quick-action-panel.md) - [Tab Set](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/tabset/lightning-tabset.md) - [Tab](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/tab/lightning-tab.md) - [Tile](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/tile/lightning-tile.md) ## Images (Visuals) Visual components display images, icons, and other visual elements. - [Avatar](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/avatar/lightning-avatar.md) - [Badge](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/badge/lightning-badge.md) - [Dynamic Icon](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/dynamicIcon/lightning-dynamic-icon.md) - [Empty State (Beta)](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/emptyState/lightning-empty-state.md) - [Helptext](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/helptext/lightning-helptext.md) - [Icon](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/icon/lightning-icon.md) - [Illustration (Beta)](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/illustration/lightning-illustration.md) - [Map](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/map/lightning-map.md) - [Pill](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/pill/lightning-pill.md) - [Pill Container](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/pillContainer/lightning-pill-container.md) ## Input Input components let users enter data and can validate the input. - [Checkbox Group](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/checkboxGroup/lightning-checkbox-group.md) - [Combobox](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/combobox/lightning-combobox.md) - [Dual Listbox](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/dualListbox/lightning-dual-listbox.md) - [File Upload](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/fileUpload/lightning-file-upload.md) - [Input](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/input/lightning-input.md) - [Input Rich Text](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/inputRichText/lightning-input-rich-text.md) - [Rich Text Toolbar Button](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/richTextToolbarButton/lightning-rich-text-toolbar-button.md) - [Rich Text Toolbar Button Group](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/richTextToolbarButtonGroup/lightning-rich-text-toolbar-button-group.md) - [Radio Group](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/radioGroup/lightning-radio-group.md) - [Record Picker](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/recordPicker/lightning-record-picker.md) - [Select](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/select/lightning-select.md) - [Slider](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/slider/lightning-slider.md) - [Text Area](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/textarea/lightning-textarea.md) ## Forms Form components help users create, edit, and view records. - [Record Form](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/recordForm/lightning-record-form.md) - [Record Edit Form](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/recordEditForm/lightning-record-edit-form.md) - [Input Field](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/inputField/lightning-input-field.md) - [Record View Form](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/recordViewForm/lightning-record-view-form.md) - [Output Field](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/outputField/lightning-output-field.md) ## Navigation Navigation components help users move between pages. - [Breadcrumbs](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/breadcrumbs/lightning-breadcrumbs.md) - [Breadcrumb](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/breadcrumb/lightning-breadcrumb.md) - [Vertical Navigation](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/verticalNavigation/lightning-vertical-navigation.md) - [Vertical Navigation Item](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/verticalNavigationItem/lightning-vertical-navigation-item.md) - [Vertical Navigation Item Badge](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/verticalNavigationItemBadge/lightning-vertical-navigation-item-badge.md) - [Vertical Navigation Item Icon](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/verticalNavigationItemIcon/lightning-vertical-navigation-item-icon.md) ## Notifications Status and notification components deliver information and insights. - [Alert](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/alert/lightning-alert.md) - [Confirm](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/confirm/lightning-confirm.md) - [Platform Show Toast Event](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/platformShowToastEvent/lightning-platform-show-toast-event.md) - [Prompt](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/prompt/lightning-prompt.md) - [Toast](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/toast/lightning-toast.md) - [Toast Container](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/toastContainer/lightning-toast-container.md) ## Output Output components display data that's formatted for the user's locale and language. Use them wherever you want to display data. - [Formatted Address](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/formattedAddress/lightning-formatted-address.md) - [Formatted Date Time](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/formattedDateTime/lightning-formatted-date-time.md) - [Formatted Email](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/formattedEmail/lightning-formatted-email.md) - [Formatted Location](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/formattedLocation/lightning-formatted-location.md) - [Formatted Name](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/formattedName/lightning-formatted-name.md) - [Formatted Number](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/formattedNumber/lightning-formatted-number.md) - [Formatted Phone](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/formattedPhone/lightning-formatted-phone.md) - [Formatted Rich Text](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/formattedRichText/lightning-formatted-rich-text.md) - [Formatted Text](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/formattedText/lightning-formatted-text.md) - [Formatted Time](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/formattedTime/lightning-formatted-time.md) - [Formatted URL](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/formattedUrl/lightning-formatted-url.md) - [Relative Date Time](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/relativeDateTime/lightning-relative-date-time.md) ## Progress Progress components convey the progress of a process. - [Progress Bar](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/progressBar/lightning-progress-bar.md) - [Progress Indicator](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/progressIndicator/lightning-progress-indicator.md) - [Progress Ring](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/progressRing/lightning-progress-ring.md) - [Progress Step](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/progressStep/lightning-progress-step.md) - [Spinner](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/spinner/lightning-spinner.md) ## Tables and Trees Table and tree components can display a large amount of formatted record data. Tree components can show hierarchy with rows that you can expand and collapse. - [Datatable](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/datatable/lightning-datatable.md) - [Tree](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/tree/lightning-tree.md) - [Tree Grid](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/treeGrid/lightning-tree-grid.md) ## Third-Party UI Embed your web apps directly in a Salesforce page. - [UI Embedding](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lwc/components/lightning/uiEmbedding/lightning-ui-embedding.md)