Skip to main content

EmptyState

Empty state is what people see when there is no data to display on a screen.

The component should help people by letting them know what can be created or displayed on the screen, as well as encouraging them to take an action, be it creating, configuring or viewing something.

The EmptyState can have an illustrative image, a title, a description and actions. Only the title is required.

Image​

  • The image in EmptyState is what characterizes it, so it is mandatory
  • The choice of image must be related to the context

Text​

  • The EmptyState message should be positive and focused on the benefit of the functionality in question. Make the benefit clear and encourage action
  • Images and texts must converse with each other in a holistic way. They must be complementary and within the context of the tool or product

Actions​

Generally, EmptyState brings an action to help you continue using a certain task in the product.

Primary action​

It is the main action of the context in which the EmptyState is inserted. It is the action that will cause the function in question to be used. It may happen that in some cases it is not necessary to take a primary action. Example: empty search state with zero results

Secondary action​

It is the action that supports the primary action, it is usually used to contribute more information on how to use the function in question

Feedback​