pattern · onboarding
Empty state
also called non-ideal state (blueprint), blankslate (primer), blank slate (ui-patterns), blank state
The screen a container shows when it holds nothing, naming the absence and offering the action that ends it.
An empty state has three jobs and usually gets one. It says what is missing, says what would be here, and gives you the single action that fills it. Skip the third and you have a dead end; skip the second and people assume something is broken.
Empty is not one situation. Nothing created yet, nothing matching a filter, and nothing left after clearing a list are three different messages, and only the first should be a cheerful invitation. A search that found nothing needs the query repeated back and a way to widen it, not an illustration.
Two neighbours to keep apart. A zero state is the first-run version, where the goal is teaching a feature nobody has used yet. A skeleton screen means the data may still arrive, so showing an empty state before the request settles tells the user something false.
Which word?
| If you want | say |
|---|---|
| the screen for a container with nothing in it yet | empty state |
| the teaching screen shown before any data exists | zero state |
| showing the shape of content while it loads | skeleton screen |
| the screen shown when a search matches nothing | no results state |
Implementations
Specimens illustrate the concept; for production use, start here.
| carbon | Empty states |