Empty State
Also called blank state, zero state, empty screen, no results
What a container shows when it holds no items, explaining why it is empty and what to do next.
Example
Same empty list, three different reasons. Switch between them — notice that only the first one is an invitation; the other two are exits.
No invoices yet
Invoices appear here once you bill a customer. Creating one takes about a minute.
The search variant repeats the query and the filter variant names the active filters — because the fastest way out is knowing exactly what put you here.
When to use it
- First use, before the user has created anything. This one is really onboarding wearing a different hat — it is the best chance you get to explain the feature.
- A search returned nothing. Repeat what was searched for, because people mistype and cannot see their own query once it scrolls away.
- Filters excluded everything. Say which filters are active and offer to clear them — the way out matters more than the message.
- The user cleared the list themselves. This one can be cheerful; they did it on purpose.
When not to
- The data is still loading. That is a skeleton — showing “No items” before the request finishes is a lie that costs trust.
- The request failed. An error is not emptiness; saying “No results” hides a problem the user could retry.
- You would only write “No data”. A blank screen with two dead words is worse than nothing, because it looks broken rather than empty.
- The container is one of many small ones on a dashboard. A full illustration inside a widget is noise; a single quiet line is enough.
Trade-offs
- Turns a dead end into a next step, which is the only reason the pattern exists.
- Carries the clearest teaching moment in the product — nothing is competing for attention.
- Cheap to build and easy to tailor per situation.
- Frequently written last and shipped generic, which wastes the opportunity entirely.
- Large illustrations get old fast for anyone who sees them daily.
- Easily confused with a loading or error state if the wording is vague.
Accessibility
What this pattern needs in order to work for everyone.
- Keyboard
- Any action in the empty state belongs in the normal tab order, right where the content would have been.
- Avoid a bare "Clear filters" as the only route back — name what will be cleared.
- Roles and state
- Use a real heading so the empty state appears in the document outline rather than being a floating paragraph.
- When emptiness is the result of a search or filter, announce it in a live region — a sighted user sees the list vanish, a screen reader user gets nothing unless you say so.
- Decorative illustrations must be `aria-hidden`; the text has to carry the meaning on its own.
- Focus
- Do not move focus when a list becomes empty — the user is usually still typing in the search field. Announce the change instead and leave focus alone.
In the wild
- Notion — A new page is an empty state that teaches the slash command — onboarding disguised as blankness.
- Linear — An empty filtered view names the active filters and offers to clear them, rather than just reporting zero.
Compared with
Side-by-side breakdowns of patterns that solve a similar problem.