Skip to content
Index730 resources
Empty State

Empty State

The screen shown when there is nothing to show, which must distinguish new, filtered-out and broken.

System & Edge States · 6 checks · 56 resources

Before you ship

6
  1. 01Illustration or icon — a contextual visual that signals emptiness rather than making the screen feel broken
  2. 02Clear heading — a short, plain-language title naming what is missing e.g. 'No projects yet'
  3. 03Supporting description — a brief explanation of what belongs in this space, most useful for first-time users
  4. 04Primary action — a CTA that creates the first item, imports or connects, rather than linking somewhere generic
  5. 05Zero state vs. no-results state — distinguish a screen empty because nothing was created from one that returned no matches
  6. 06Error state variant — a separate variant for when content failed to load, as opposed to genuinely being empty

Resources that help you build this

56