In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Empty state

Empty state is used when a data display area is exceptionally empty.

Usage

Use empty states to show a lack of data: lists, table, charts, etc. (in a notification panel, for example). It may also indicate a maintenance operation or an error (Page Not Found). Empty states allow you to give feedback and instructions to follow indications instead if displaying empty space. This helps avoid confusing it with a loading error, or a possible bug.

Empty_State_Usage

Best Practices

  • Explain the reason for the empty state clearly and concisely.
  • The illustration must be related to the message (for example, an absence of notification may be illustrated by a bell with a slash through it)
  • Always accompany the illustration with text.
  • If an action must be taken, it is possible to add a primary CTA.
  • In the case of an error, do not send a message that is too negative, but try to steer the exchange toward resolving the problem.
  • For instant feedback, opt for messages (banners, toast, etc.)

 

Placement

Empty states are used in areas where an absence of data may occur: a card, a notification panel, a modal, etc.

Visual

Appearance

The empty state is composed of an icon and text.

Empty_State_Visual
Back to top