Empty state
Also called: zero state, blank slate, no data state.
What a screen shows when there is nothing in it yet, like an empty inbox or a new project. A good one explains why it's empty and gives one clear next step.
Empty
Say it in a prompt
When the list has no items, show an empty state centered in the panel with a simple illustration, one line saying why it's empty, and a primary button to create the first item. Seen on
- Vercel Geist design system: Geist's Empty State component fills a space that has no content yet, so the user is not confused.
- A brand-new project, folder or inbox that has nothing in it yet and shows a friendly message with a button to add the first item.
You might describe it as
- what the page shows when there is nothing yet
- screen with no items and a button to add one
- blank list message
Not to be confused with
- Skeleton screen
An empty state says there is nothing here; a skeleton screen says something is still loading.
- Error state
An empty state is normal and expected; an error state means something went wrong.
- Drop zone
An empty state says there is nothing here yet; a drop zone is an area waiting for you to drag a file onto it.