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.
You can say this to an AI Agent
When the project request succeeds with no items, show 'No projects yet' and a Create project action. Keep loading and request failure as separate states with appropriate feedback and retry. Simulate and verify all three states.
When to use it
- A new account with no recordsNameStatusThere’s no data here yet
- Search with no resultsNo projects yetCreate project
- A filter that matches nothingWerewolfNo matches found. Try a different keyword.
- Content removed or not yet availableYour inbox is empty — you’re all caught up 🎉
When NOT to use it
- Show only an illustration with no explanationNo dataUser: What now? What should I do?
- Blame the user for an empty resultLoading, please wait…
- Offer an action that cannot solve the empty stateNo dataIt’s actually a network error, but it looks empty
- Use the same message for first use, errors, and no search resultsNothing here yetThe illustration steals attention from the content
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check