Empty state
An empty state appears when there is no data to display and describes what the user can do next.
When to use
- A list, table or board with nothing in it yet, where the reader could add the first item.
- A search or filter that matched nothing, where the way out is to change the query.
- A feature not set up yet, where the empty screen is the natural place to start.
When not to use
- A failure. An error is not an empty state, and dressing it as one hides that something went wrong.
- Content still loading. That is a skeleton or a spinner.
- A space that is empty on purpose, such as an optional panel. Leave it quiet.
Guidance
Do
No conversations yet
When someone writes in, their conversation will appear here.
Say what will fill the space and give the one action that starts it.
Don't
No data
There is no data to display.
Do not restate the emptiness and stop. It tells the reader nothing they cannot already see and leaves them with nowhere to go.
Content
What to write, and what to leave out.
- Name the thing that is missing. No conversations yet, not No data.
- Explain what would fill it, because that is the part the reader cannot see.
- One action. A screen with nothing on it is the worst place to offer a choice.
- For no search results, say which query found nothing and suggest loosening it.