UNSTABLE Empty State

An Empty State component is a user interface element that appears when a page or a section of an application has no data to display. It provides users with feedback or guidance when they encounter a situation with no content, helping to set expectations and offer potential next steps.

Component Status

Figma

Up to date

Status

Unstable

HTML

Up to date

React

Up to date

Twig

Up to date

Design usage

  • An indication to the user that there is no data to display in the current view.
  • It often includes an alternative action (e.g. try a different search term).
  • For better visual impact, it can incorporate an icon or image.