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.

Status:

Maintainer:

Contextual image

Overview

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.

Example of an empty state when a search yields no results

Example of an empty state when a search yields no results

Example of an empty state when a table has not yet been populated

Example of an empty state when a table has not yet been populated

Example of an empty state when a slide-over panel hasn't been populated yet

Example of an empty state when a slide-over panel hasn't been populated yet