Matchbox
Updated Jul 22, 2021

Empty States

PATTERNS

Empty States are used to provide education or guidance to the user when there is no data to display

What are empty states?

Empty states are areas of a user experience where content cannot be shown because there is no content to display. Some examples of an empty state include a list of resources that has no items in it, or a search results list that returns no results.

Why use empty states?

Empty states help users navigate through missing content by providing clear guidance on what to do next. Without empty states, users may become confused or frustrated, unclear as to how they are to proceed.

Empty states can be used to:

  • Educate or inform users
  • Provide guidance
  • Promote a product or service

Example Empty States

Example of a list's or table's empty state after being filtered.
Example of a list's or table's empty state after being filtered.
Example of a typeahead empty state.
Example of a typeahead empty state.
Example of a page-level empty state.
Example of a page-level empty state.