Empty State
also known aszero state · blank slate · first-run experience
A designed view shown when a list, table, or page has no content yet — explains what should be there and how to get it.
An empty state replaces a blank UI region with a small illustration or icon, a headline explaining what's missing, a one-sentence rationale, and a primary CTA to populate it. It's the first impression of every list, dashboard, and inbox in the app.
Great empty states do three things: tell the user *what* should be here ("No projects yet"), *why* they're seeing nothing ("You haven't created any"), and *how* to fix it ("+ New project"). Without all three, users assume the feature is broken.
Modern empty states avoid heavy illustrations in favor of small monochrome icons or simple line drawings — keeps the moment lightweight and ages better than character-heavy 2010s-era empty states.
- First-time experience for any list, table, or feed
- Filters that produce no results
- Inbox / notification panels with no items
- When the empty state is permanent — design the feature differently
- +Always include a primary CTA — empty states should drive an action
- +Use a small icon (32–48px), not a full illustration
- +Differentiate first-time empty ("Get started") from filtered empty ("Clear filters")
- −Don't show a generic "no data" message — explain what should be here
- −Don't use a full-page hero illustration for an empty list — overkill
People also ask
Should empty states always have a CTA?
First-run empty states should — that's the whole point. Filtered-result empty states should have a 'clear filters' or 'change criteria' affordance, even if it's not a primary button.