State
Empty State
An empty state is the screen shown when there's no data to display yet, explaining what's missing and guiding people to the next action.
Definition
An empty state is the screen that appears when there's no data to show yet. A cart that's still empty right after signup, an inbox with zero messages, a list that returns no search results — they all count. If you leave that moment as a blank white page, people start to wonder whether the screen is broken. A good empty state briefly explains what's missing, why it's missing, and what to do next, turning that intimidating blank page into a signpost that leads naturally into the next action. What matters isn't the bare fact that there's no data, but how you explain the gap and guide people toward filling it.
Why does it matter?
An empty state is often the very first screen someone sees in your product, because right after signup there's naturally no data at all. If the screen just sits there blank, people don't know where to begin and tend to leave. But when an empty state warmly points to that first step, they start doing something right away and ease into the product. So treat an empty state not as an accident or an edge case, but as an invitation to the next action. Even for a fleeting empty state like an empty search result, telling people why there are no results and how to try again keeps them from getting stuck and lets them keep hunting for what they want. It's a screen that owns both the first impression and the moment of frustration. The moment when there's nothing to show is actually where it becomes clearest how carefully a product looks after its users.
Common mistakes
- Leaving the screen as a blank page with no guidance at all. People can't tell whether it's a normal state with no data or a broken screen, so they don't know what to do and drift away.
- Not distinguishing between "no data" and "still loading." If you declare that there are no results when the data is merely on its way, you confuse people with a problem that doesn't actually exist.
- Piling on sympathetic phrasing without telling people what they can do next. A kind message alone can't move anyone forward, so they end up stalled in front of the screen with no idea what to do.
Practical tips
- Build your empty state around a simple skeleton: one icon, one line of explanation, and a button that opens the next action. Just these three pieces are enough to turn a blank page into an invitation to move forward.
- Tell people not just what's missing, but why it's missing and how to fill the gap. For empty search results especially, offering a concrete next step — like suggesting they try different keywords — works well.
- Always handle the empty "no data" state and the "still loading" state separately. Blur the two together and you can trick people into thinking data that's perfectly on its way simply isn't there.
Ask your AI
Design the empty state a brand-new user sees the first time they open [screen — e.g. cart / inbox]. Build it on the classic three-piece skeleton — one icon, one line of copy, and one button that opens the next action — and make sure the copy conveys all three things: what's missing, why it's missing, and what to do next. Don't just pile on sympathetic phrasing like 'nothing here yet' — the button has to lead straight into the next action ([e.g. add your first item]). Lay out the icon, headline, body, and button label in a table at the end.
Design the empty state that shows when [search / filter] returns zero results. This is a fleeting state, not a truly data-less screen, so point out why there are no results and always offer a concrete next step — suggest different keywords or loosening the filters. Don't stop at a flat 'No results found'; include a retry action button plus copy so people can keep hunting instead of getting stuck. Write the copy so it echoes the query they typed back to them.
In the component code I'm pasting below, find where a zero-data case renders as a plain blank page and rebuild it as an empty state with the three-piece skeleton — one icon, one line of copy, one next-action button. Crucially, if 'loading' and 'no data' are lumped together, split them into separate isLoading and isEmpty branches so you never declare there's nothing when the data is merely on its way. Check that each branch tells people what's missing, why, and what to do next, then give me the revised code.