Empty state

Empty states should be used when the expected content cannot be displayed. It sets expectations and indicates the reasons for this blank space.

Overview

The Empty State is a customizable component you can use when the real content is not available. It informs users why content is not shown or cannot be displayed.

This component is a great help to create or maintain communication with users in various situations: error management, no results after a search, or no objects in a panel.

The Empty State component is fully customizable; therefore, it has a large number of variants:

• Illustrationis optional but highly recommended; its size varies: "small", "medium" or "large". Illustrations must convey the right message: be mindful when choosing them.

• Title (Heading/H2) is mandatory. Heading must be concise as it summarizes the situation.

• Subtitle (Paragraph) is optional. It always needs to go with a title. Subtitles are meant to clarify the title and bring additional information if needed. Don't repeat the heading in paragraph text, and don't add a subtitle if it doesn't add any value.

• Action Button is optional. It has to provide useful action to resolve the situation if needed.

Guidelines

How to use

The component takes over the expected content. As soon as an Empty State appears in a panel, there cannot be any other kind of content (text, title, datatable, etc.) in the same panel.

Do- Replace all content of a panel by Empty State ComponentDon’t- Mix Empty State component with actual content

When a Datatable or a Datalist is empty, only display the toolbar and the empty state. Column titles, action buttons, etc., must be removed.

Datatable and Datalist empty states (no results, loading error) are automatically handled by ROMA.

When to use

When content cannot be displayed, follow content guidelines for each use case:

• First time: when the user sees a feature for the first time. See content pattern

• Onboarding or configuration process: when the user sees a feature for the first time and is encouraged to take action. See content pattern

• No results: when the user has searched for specific data, but no results match. See content pattern

• Error Management: when the user faces network or generic technical issues preventing us from showing them the data they are looking for. See content pattern

When not to use

Do not use empty states:

• to display marketing information or feature promotion.

• to display important contextual information covered by the Alert component.

Content

As its name states, an empty state shows users that the content they are looking for doesn't exist yet, preventing any kind of confusion.

An empty state should:

• Be clear: include an explanation of why a customer sees the empty state if it helps them better understand what to do next.

• Give direction and educate the customer: let customers know what steps they can take to move forward. Guiding them to "Create object" is more helpful than just saying "No object".

• Be encouraging and inspire confidence: use approachable copy to ensure a positive experience. Never make users feel unsuccessful or guilty because they see an empty state. For example, if users land on a page they don't have permission to view, explain why clearly.

For each use case, content must follow a specific pattern:

First time

• When users see a feature for the first time:

No [item] yet

Title and description should explain what will eventually be in this table. The button (optional) can guide the creation of a first object.

Onboarding or configuration process

• When users see a feature for the first time and are encouraged to take action :

Start [verb]-ing [noun]

[Verb] [noun]

In this specific context, users must be encouraged to take action (e.g., setting up their profile, configuring their catalog...). Title and description should be action-driven and describe what will be expected from the user.

No results

Automatically handled by ROMA.

When users have searched for specific data, but no results match:

No results found. Try different search term or update filters.

Title and description should make it obvious that there are no results after searching for an item or filtering data and encourage users to check their search input and update filters.

Error management

Automatically handled by ROMA.

When the user faces network or generic technical issues preventing us from showing them the data they are looking for:

There was a problem [verb]-ing [object]. Refresh the page or try again later.

Title and description should be clear and transparent on what is happening and if the user can do anything about it.

Key takeaways

• Choose the right illustration to convey the information

• Add a button if it guides users through a process

• Include a heading that summarizes the situation in a short sentence and add a subtitle if more explanation is needed

• Forget to select an illustration

• Add more than one button

• Write long and complex headings and/or paragraphs. Use both elements to simplify mental load.