--- schema_version: "1" id: 2e81b6de719b63281d6893aa356ff50560b406698f3310e403395594577de602 title: Display Consistent Empty State Illustrations With Theme Support (Beta) collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/release-notes/260-0-0/rn_lc_empty_state_illustration.md canonical_url: https://help.salesforce.com/s/articleView?id=release-notes.rn_lc_empty_state_illustration.htm&release=260&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 081f6ff99034e01e5677685ef0b7fabfa36e57698c3f3074666c45cc145915a6 description: Use the new lightning-empty-state component to add meaningful visuals and content to your components that show empty states. This component displays the latest Salesforce Lightning Design System (SLDS) empty state illustration and correctly sizes it for the container, simplifying your UI development. The SVG illustrations automatically adjust to the user's selected theme, and can adapt to dark mode in SLDS 2 themes, for a consistent look and feel across your app. The new lightning-illustration component displays the same set of illustrations without text. products: - Cross Cloud Packages Solutions release: "260" --- # Display Consistent Empty State Illustrations With Theme Support (Beta) Use the new `lightning-empty-state` component to add meaningful visuals and content to your components that show empty states. This component displays the latest Salesforce Lightning Design System (SLDS) empty state illustration and correctly sizes it for the container, simplifying your UI development. The SVG illustrations automatically adjust to the user's selected theme, and can adapt to dark mode in SLDS 2 themes, for a consistent look and feel across your app. The new `lightning-illustration` component displays the same set of illustrations without text. **Where:** This feature applies to Lightning Experience. The component must run in a Salesforce org to display the illustrations. ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-salesforce_release_notes-260-0-0-production-enus/ba62a63b-6cd1-440e-8d24-e867afab0363/images/icon_note.png) Note The `lightning-empty-state` and `lightning-illustration` components are a pilot or beta service that is subject to the Beta Services Terms at [Agreements - Salesforce.com](https://www.salesforce.com/company/legal/agreements/) or a written Unified Pilot Agreement if executed by Customer, and applicable terms in the [Product Terms Directory](https://ptd.salesforce.com/). Use of this pilot or beta service is at the Customer's sole discretion. **Why:** Use the `lightning-empty-state` component wherever you expect a container to display data, such as records or tasks, but there’s no data to populate it. There can be several reasons why there’s no data, and now you can find just the right illustration to provide context and lighten the mood. The `lightning-empty-state` component also provides a title, description, and call-to-action buttons so you can provide more clarity or lead users to the next step of their journey. You can also depict an empty state without an illustration, title, or call-to-action button. Only the description is required. **How:** Include the `` tag in your Lightning web component and pass the illustration name and title by using attributes. Pass the description and cta (call-to-action) by using slots. See the illustration names and usage information in the [Lightning Component Reference](https://developer.salesforce.com/docs/platform/lightning-component-reference/) . See the [SLDS 2](https://lightningdesignsystem.com) site for images of the illustrations and extensive information about the Empty State design. This example shows an empty cart illustration along with a Browse Products call-to-action button with the brand variant. ```xml

Head to the product catalog to add something to your cart.

 ``` The button handler in the component's JavaScript file carries out the action. ```javascript import { LightningElement } from "lwc"; export default class MyEmptyState extends LightningElement { handleCtaClick(event) { // go to the Products tab } } ``` The same `myEmptyState` example component can run in both SLDS 1 and SLDS 2 themes. The `lightning-empty-state` component automatically detects the SLDS version of the theme and presents the correct version of the illustration. In SLDS 2 themes, this component code produces this empty state depiction with an empty cart illustration. ![Empty state component with an empty cart illustration](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-salesforce_release_notes-260-0-0-production-enus/ba62a63b-6cd1-440e-8d24-e867afab0363/salesforce_release_notes/images/260_lc_emptystate_slds2.png) For SLDS 1 themes, the same component produces this empty state depiction with a “gone fishing” illustration. ![Empty state component with a gone fishing illustration](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-salesforce_release_notes-260-0-0-production-enus/ba62a63b-6cd1-440e-8d24-e867afab0363/salesforce_release_notes/images/260_lc_emptystate_slds1.png) The `lightning-illustration` component can display the same empty state illustrations without descriptive text or buttons. We’re working on more illustrations to use with this component. This example component shows only the empty cart illustration in SLDS 2 themes and the gone fishing illustration in SLDS 1 themes. ```xml ``` #### See Also - [Lightning Component Reference](https://developer.salesforce.com/docs/platform/lightning-component-reference/) - [_Salesforce Lightning Design System 2_: Empty State component design](https://www.lightningdesignsystem.com/2e1ef8501/p/21245c-empty-state)