Airbus uses cookies (including from third parties) to enhance site navigation and offer you useful features by analysing the site usage. By clicking “accept”, you agree to the use of cookies. For further information, please refer to our cookies policy. Accept

Empty state

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

General guidelines

An empty state improves the user experience by encouraging the user to interact with the interface. It can be used to ask the user to perform an action or to guide him through the interface.

For example, it can indicate a maintenance operation or an error. This component allows you to give feedback and instructions to follow instead of displaying empty blank spaces.

Best practices

Use illustrative inline icons. Prefer a simple one (for example, an absence of notification may be illustrated by a bell).


Never use other icon libraries and style or the action icons. An illustration should not take all the attention to itself.


Use clear text and consider adding a primary call to action if an action must be taken.


Do not make disproportionate illustrations related to the card, modal or screen size.

Content guidelines
  • Always explain the reason behind the empty state, be clear, concise and guide the user to perform an action.
  • Never use an illustrative icon only, an empty screen without any advice or explanation can confuse users.
  • In case of an error, do not send a too negative message but prefer to steer the exchange toward resolving the problem.
  •  For instant feedback, opt for messages (banners, toast, etc.)
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top