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.
Last updated
Empty states should be used when the expected content cannot be displayed. It sets expectations and indicates the reasons for this blank space.
Last updated
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.
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 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
Do not use empty states:
to display marketing information or feature promotion.
to display important contextual information covered by the Alert component.
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:
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.
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.
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.
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.
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.
