Empty states
Explain why a view is empty and help people take the next useful step
State what is missing, why the view is empty when the reason is known, and which action will help. Keep the message in the area where content would normally appear so the rest of the page remains familiar.
A new collection explains what belongs here and offers one concrete action: Create entity.
Illustrative example · Reduced motion: choose a state to compare.Match the reason
| State | Message should explain | Useful action |
|---|---|---|
| The collection is new | What people can create here. | Create the first item. |
| Filters match nothing | Which conditions are restricting the view. | Clear or edit filters. |
| The person has finished a task | That there is nothing left to do. | Return to the overview, if useful. |
| Content is unavailable to this person | The access needed, when that can be disclosed. | Request access or choose another area. |
Show loading while a query is unresolved. Show an error if the query fails. Reserve the empty state for a known result.
Write a short invitation
For a new entity collection, a starting example is:
No entities yet
Create an entity to see it in this view.
Create entity
Use a Button for the primary action and name the object it creates. Offer a secondary explanation only when the reader needs it to proceed. If the person lacks permission to create content, provide an action they can complete.
A small icon can help identify the kind of content. Keep it decorative when the heading already communicates its meaning. The heading, explanation, and action must still work without the illustration.
Preserve context
Keep search terms and filters available when they caused the empty result. Keep the view title and relevant navigation visible. Avoid replacing the whole page with a large illustration that hides the controls needed to recover.
Check the first visit, a cleared collection, an unmatched search, and a completed workflow separately. They need different explanations even when they share the same layout.
Last updated on 2026-10-31
Was this page helpful?