Variant A - No content empty state


No data available denotes the empty state scenario for when we cannot display data due to when we add a new feature to the new release and it requires some actions, for first time use of this feature, or when the data is not available in general. There are three formats you can represent this empty state - table format, card format, and page view format.

The look


When to use

Use this variation when there is no data or content to display.

Use cases:

  • First time use, no data yet
  • A new feature is added to the next release and a user needs to restart/recommission or take actions to retrieve these data.

Try to understand and find the balance between the situation and the content you are providing. Adding more content also adds more cognitive cost and does not denote that it is a better solution.


  • Use bite-size pieces of information and simpler situations.
  • Be specific about what will be available when the data populates.
  • Keep keywords to the minimum so they are fast to digest and take actions.
  • If there are actionable next steps, provide them a link or a primary action so they can act upon.


  • Don’t include multiple options in one empty state. If there are multiple options, pick the most important one.
  • Try not to use product specific terms.
  • Don’t include irrelevant content.
  • Don’t lead a user to a dead end.