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.)
Responsive behaviours
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