— PATTERN · UNDER CONSIDERATION
Empty states
What a screen shows when there is no data — first-use, no-results, and no-permission.
What a view shows when it has no content to display. An empty state is never a blank screen — it explains why there’s nothing there and, where possible, offers a way forward.
The three types
- First-use — the person hasn’t created anything yet. Orient them and offer a primary action to get started.
- No-results — a search or filter returned nothing. Confirm what was searched and suggest broadening or clearing filters.
- No-permission — the person can’t view this content. Explain why and point to who can grant access or where to go instead.
Usage
When to use
- Any view that can be empty — lists, tables, dashboards, search results, and feeds.
- Whenever a screen needs to cover its empty, no-results, or permission-denied states — two of the five states in the UX Guidelines.
How it works
A typical empty state combines: an icon or placeholder visual, a short heading, one line of explanation, and — for first-use and no-results — a clear next action.
Do & don’t
Do
- Explain why the view is empty and give a clear next step.
- For no-results, confirm what was searched and let people broaden or clear filters.
- For no-permission, say why and point to who can grant access or where to go instead.
- Match tone to the audience — see Empty states and Voice & tone.
Don't
- Ship a blank screen where data could be absent.
- Use apologetic or dead-end phrasing that leaves the person stuck.
Related
- Components: Placeholders
- Content: Empty states
- Guidelines: UX Guidelines — state completeness