--- title: "Empty state UI: anatomy, variants and examples | Kombai" description: "An empty state is what a screen shows when there is nothing to display yet, with a short reason and a next step." canonical_url: https://kombai.com/glossary/empty-state/ author: "The Kombai Team" --- # Empty state An empty state is what a screen shows when there is nothing to display yet, with a short reason and a next step. - Also called: zero state, blank slate - Platforms: Web, Mobile - In the Kombai gallery: [34 web designs](https://kombai.com/gallery/web/empty-state/), [34 mobile designs](https://kombai.com/gallery/mobile/empty-state/) - [Ironwood Ads](https://kombai.com/gallery/inspirations/empty-state-web-29/) (Web) - [Pomelo](https://kombai.com/gallery/inspirations/empty-state-ios-31/) (Mobile) - [Solvo](https://kombai.com/gallery/inspirations/empty-state-web-4/) (Web) ## What is an empty state? An empty state is what a screen shows when it has loaded and there is nothing in it: no saved items, no search results, no messages left. A good one says why the space is empty and offers the one action that fills it. - It keeps the page's header and navigation, and replaces only the empty list or panel. - The copy changes with the cause: first use, no results or everything done. ## When to use empty state - **First use.** A list, inbox or workspace that starts with nothing in it. - **No results.** A search or a set of filters that matches nothing. - **Cleared work.** An inbox, alert list or queue that someone has emptied. ## When not to use one - **Content still loading.** Show a skeleton or a spinner until the request finishes. - **A failed request.** Show an error with a retry. An empty message hides the failure. - **Replacing the whole page.** Keep the header, tabs and filters. Replace only the empty area. ## Anatomy 1. **Illustration**: Optional and decorative 2. **Title**: Says what is missing 3. **Description**: What will show up here 4. **Action**: One clear next step 5. **States**: First use, no results, all clear ## Variants We sorted every empty state design in the Kombai gallery and found six patterns. ### 1. First-use prompts The default. Nothing has been made yet, so the screen explains what goes here and puts a Create button right under the message. - [Marketrail](https://kombai.com/gallery/inspirations/empty-state-ios-28/) (Mobile) - [Peridot](https://kombai.com/gallery/inspirations/empty-state-web-30/) (Web) - [Anvil](https://kombai.com/gallery/inspirations/empty-state-ios-21/) (Mobile) ### 2. No results A search or filter matched nothing. The message repeats the query and offers other searches or a way to start over. - [Satchel](https://kombai.com/gallery/inspirations/empty-state-ios-14/) (Mobile) - [Craftlane](https://kombai.com/gallery/inspirations/empty-state-web-13/) (Web) - [Wexford](https://kombai.com/gallery/inspirations/empty-state-web-27/) (Web) ### 3. All clear Every alert is read, every balance is paid or no issues were found. These reassure people instead of asking them to act. - [Marigold](https://kombai.com/gallery/inspirations/empty-state-web-25/) (Web) - [Halvo](https://kombai.com/gallery/inspirations/empty-state-ios-6/) (Mobile) - [Basalt](https://kombai.com/gallery/inspirations/empty-state-web-23/) (Web) ### 4. Illustration-led A large illustration or product photos fill the screen and carry the tone, with one short, often playful line. - [Encore](https://kombai.com/gallery/inspirations/empty-state-ios-3/) (Mobile) - [Roadsy](https://kombai.com/gallery/inspirations/empty-state-web-2/) (Web) - [Encore Maison](https://kombai.com/gallery/inspirations/empty-state-ios-23/) (Mobile) ### 5. Prompt starters An assistant with no conversation yet greets people and lists example questions they can tap to begin. - [Rivet](https://kombai.com/gallery/inspirations/empty-state-ios-29/) (Mobile) - [Quillon](https://kombai.com/gallery/inspirations/empty-state-web-22/) (Web) - [Ora](https://kombai.com/gallery/inspirations/empty-state-ios-17/) (Mobile) ### 6. Empty panels in a full page One column, section or side panel is empty while the rest of the page has content, so the message stays small. - [Fernwick](https://kombai.com/gallery/inspirations/empty-state-web-24/) (Web) - [Basalt](https://kombai.com/gallery/inspirations/empty-state-ios-34/) (Mobile) - [Halyard](https://kombai.com/gallery/inspirations/empty-state-web-7/) (Web) ## Where empty states show up ### Saved items and carts Empty bags, wishlists and saved lists point people back to the shop or to their first list. - [Kova](https://kombai.com/gallery/inspirations/empty-state-ios-8/) (Mobile) - [Northloom](https://kombai.com/gallery/inspirations/empty-state-web-20/) (Web) - [Wayfare](https://kombai.com/gallery/inspirations/empty-state-web-11/) (Web) ### Trips and bookings Nothing upcoming yet, with a search or booking button above the history of past trips. - [Milepost](https://kombai.com/gallery/inspirations/empty-state-web-21/) (Web) - [Marlowe](https://kombai.com/gallery/inspirations/empty-state-ios-26/) (Mobile) - [Alderbrook Grounds](https://kombai.com/gallery/inspirations/empty-state-web-12/) (Web) ### Feeds, groups and rooms A new group, feed or session with nobody in it yet asks people to invite others or find people to follow. - [Northlight](https://kombai.com/gallery/inspirations/empty-state-ios-27/) (Mobile) - [Willowbend](https://kombai.com/gallery/inspirations/empty-state-ios-25/) (Mobile) - [Bellwether](https://kombai.com/gallery/inspirations/empty-state-web-28/) (Web) ## Empty state vs similar components | | [Empty state](https://kombai.com/glossary/empty-state/) | [Skeleton loader](https://kombai.com/glossary/skeleton-loader/) | [Error message](https://kombai.com/glossary/error-message/) | |---|---|---|---| | Means | Loaded, and nothing is there | Content is still on its way | The request failed | | Shows | A reason and a next step | Gray shapes in the layout | What went wrong and a fix | | Ends when | Content is added | Content arrives | People retry or fix it | ## Build notes - Say what will show up here and offer one next step, like a Create button. - Match the copy to the cause: first use, no results or everything done. - Announce a no-results message with role="status", without moving focus (WCAG 4.1.3). - On no results, repeat the search term and offer a way to clear it. - Keep the header, tabs and filters in place. Replace only the empty area. - Give decorative illustrations alt="" so screen readers skip them. ## FAQ ### What's the difference between an empty state and an error state? An empty state means the request worked and there is nothing to show. An error state means something failed, so it says what went wrong and offers a retry. Showing an empty state after a failure tells people their data is gone when it only failed to load. ### What should an empty state include? A short title that names what is missing, one line on what will show up here and one action that fills the space, like Add a card. An illustration is optional. ### Does an empty state need an illustration? No. An illustration sets the tone and helps on first use, but the title and the action do the work. On a no-results screen or a small panel, a small icon or plain text is enough. ### How do I make an empty state accessible? Use real headings and buttons, and give decorative illustrations an empty alt. When a search returns nothing, put the message in a status region so screen reader users hear it without losing their place in the search field. ## Related terms - [Skeleton loader](https://kombai.com/glossary/skeleton-loader/) - [Error message](https://kombai.com/glossary/error-message/) - [Coach marks](https://kombai.com/glossary/coach-marks/) - [Search bar](https://kombai.com/glossary/search-bar/) ## References - [WCAG 2.2: Understanding status messages](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) - [MDN: ARIA status role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role) - [W3C WAI images tutorial: Decorative images](https://www.w3.org/WAI/tutorials/images/decorative/) - [Apple Developer: ContentUnavailableView](https://developer.apple.com/documentation/swiftui/contentunavailableview)