Empty state pattern
Empty states are useful when something is yet to be populated and is awaiting data or information. Another common use is when a search or filter yields no results.
An empty state consists of:
- An illustration that is relevant to the context or the product
- A headline text explaining the reason for the empty state
- A description of the resource contained typically found in the empty location
Don’t include the primary call to action in the empty space. The call to action should remain in the same location whether an area is populated or empty. This prevents confusing users as they become familiar with the system.