Explain why this area is empty and offer a useful next step when one exists.
Problem
There is nothing to show yet.
Show an empty state when
- A new collection needs its first item.
- A filter combination produced no matches and can be cleared.
Empty-state mistakes to avoid
- Calling a loading, permission, or request failure 'no items' when data may still exist.
- Adding a create or retry action when there is nothing the user needs to do, such as a queue with no outstanding tasks.
- Filling the space with decoration that hides the explanation or useful action.
Example
No projects yet
Create your first project to start organizing your work.
My first project
Your example project is ready. It exists only in this page.
Implementation
- Use a specific heading, such as 'No matching patterns', and keep the message in the affected content region's reading order.
- For a new collection, offer a create or import action the user can perform. For no results, preserve the query and filters and offer a way to adjust or clear them.
- Show loading feedback while a request is pending. Explain failures or missing access separately, with a recovery action when available.
- When a no-results or success message updates without moving focus, expose the message to assistive technology. An existing role="status" container updated with the message is one suitable technique; do not make the whole results area live.
- An empty state present on initial page load does not need a live region merely because it is empty. If an action removes the focused control, move focus to a logical place in the updated interface.
Tradeoffs
Examples can explain what belongs in a new collection, but fake content risks being mistaken for real data. Clearly label sample content if you use it.
Verification
Can users tell whether to create, adjust a query, wait, retry, or do nothing? Verify dynamic announcements and where keyboard focus goes after the state changes.