====== Empty States ======

Empty states are the messages that appear when there is no data yet, or when a filtered search returned no results.

A progress loader is //not// an empty state. An empty state appears when the page has loaded all of its data and there is still nothing to show the user.

Examples: 
  * You have not added any documents to this folder yet. [[ui_ig:style_guide:start|Upload]]
  * There are no open POs at this location. [[ui_ig:style_guide:start|Remove filter conditions]]

A good empty state should answer these questions:
  - What is supposed to be here?
  - Why is it not here?
  - How do I get it?

Ideally, the interface should distinguish between initial states (nothing added yet) and zero results (there is data, but your conditions were too narrow).

===== Empty States in Evergreen =====

Empty states appear in:
  * Grids
  * Reports folders
  * Baskets and lists

[[https://bugs.launchpad.net/evergreen/+bugs?field.tag=ux-empty-states|bugs tagged with ux-empty-states]]

===== Further Reading =====

  * [[https://thestyleofelements.org/dont-waste-that-space-313e481086da|Don’t waste that space: A beginner’s guide to writing empty states]]
  * [[https://www.toptal.com/designers/ux/empty-state-ux-design|Empty States: The Most Overlooked Aspect of UX]]
  * [[https://uxdesign.cc/7-types-of-empty-states-and-how-to-use-them-717006dfaa8a|7 types of empty states and how to use them]]