Empty statepattern
What to show when there's nothing to show.
Patterns- Built from
- Button · Text
- Guidance
- draft · v0.1.0
Examples
Copy the code into a product and change the content – the layout and tokens carry over.
No projects yet
A project holds the screens a client reviews and signs off.
No screens match “checkout”
Check the spelling, or clear the filters to search every project.
Guidance
When to use
- When a list, table or page has nothing in it: first use, no results, everything done.
Rules
- Say what would be here and why it's empty, in plain words.
- Give the one action that fills it – or, for no results, how to widen the search.
- A first-use state can use a dashed container and an icon; a no-results state stays light.
- Don't use an illustration that pushes the action below the fold.