Empty state
The UI shown when a list, section, or screen has no items to display.
No projects yet
Create your first project to get started.
An empty state replaces a blank area with helpful content: a short message explaining why it's empty, an illustration to soften the blank space, and a clear action that resolves the emptiness (create the first item, change a filter, invite a teammate). Distinct from a zero state, which is specifically the first-time-no-data screen before the user has done anything.
Also called
null stateno-content state
When to use
- Lists that may be empty (inboxes, projects, search results)
- Filtered views that returned no matches
- Sections where data may not exist yet
When not to use
- Areas where emptiness is the default for most users — design around the empty case as the primary state instead
Related
Source
UX vernacular; widely documented across design systems (Material, Atlassian, Shopify Polaris).