Empty
You might say
When there's no data, show an image and tell people what they can do next instead of leaving the page blank.
Explain why no data is shown and what to do nextAn empty state should not leave a blank area. Tell people what normally appears there, why it is empty now, and whether the next step is to create something, search, change a filter, or wait for data.
When to use it
- A new account with no records
- Search with no results
- A filter that matches nothing
- Content removed or not yet available
When NOT to use it
- Show only an illustration with no explanation
- Blame the user for an empty resultLoading, please wait…
- Offer an action that cannot solve the empty state
- Use the same message for first use, errors, and no search results
Anatomy
No projects yetCreate your first project and start collaborating
Container for the whole empty state
Helps users recognize the state, but should not overpower the core copy.
Explain why it is empty
Optional, provide clear next steps
Variants
Simple
No collection yetCollection content will appear here
For a secondary area where a simple empty message is enough.
With Action
No projects yet
When you need to guide users to create the first piece of data
Custom
The recycle bin is emptyDeleted files will remain here for 30 days
A brand-heavy page with illustrations that fit the business scenario
Typical use cases
New project list
Member list
No search results
0 results found
No relevant content found
Try changing keywords, such as "board game"
Empty inbox
No items yet
Projects are used to organize your design drafts and files
No filtered data
Recycle BinFile retention for 30 days
The recycle bin is empty and deleted files will appear here
Further reading