Empty state
/EMP-tee STAYT/ · noun · FEEDBACK pattern · #065
What a screen says when there's nothing to show. The good ones explain why it's empty and hand you the one action that fills it.
You might call it
- “the no results page”
- “an empty cart page”
- “the screen when there is nothing here yet”
- “the page with an illustration and a button to get started”
- “a no data screen”
…its name is Empty state.
Common questions
What is the screen called when there is nothing to show yet?
An empty state: the screen shown when a list, search or inbox has no content, usually with a short explanation, an illustration and a button for the next step, such as “Create your first project”.
In code
| SwiftUI | ContentUnavailableView |
|---|---|
| UIKit | UIContentUnavailableConfiguration |
| Android / Flutter / Web | No dedicated component — an icon or illustration, a message and an action button |
Prompt for your AI coding tool
Add an empty state for when this list has no items: a simple icon or illustration, one line saying what will appear here, one line of help, and a primary button that creates the first item. For an empty search result, say what was searched for and offer to clear the filters instead. Keep it centred in the space the list would use, and never show a blank screen.
More UI words to use when vibe coding →