EmptyState

Use the EmptyState component to give feedback to an end-user in case there is no data available. There are cases where this data is missing, requires special permission, or has not been yet created, for example.

OverviewPropertiesUsage

The EmptyState component is a generic component that gives feedback to an end-user in case there is no data available. Here is some guidance on writing empty states.

Content guidelines

• An empty state title should be short, concise, and tell the user about the issue or current situation in one sentence.
• Don't use punctuation in empty state titles.
• Provide details when the user needs more contexts to solve the empty state. Explain the solution with straightforward language.
• Keep the details to one or two sentences.
• Avoid repeating the title in the details.
• For the action button, make the button label match the action the user will take. Keep the button label to one or two words. Learn more about Buttons.
• If a footer is necessary, provide the user with helpful, relevant links such as documentation or support articles. Learn more about Links.
• Don't apologize in an empty state.
• If there's an illustration in the empty state, add an arial-label for accessibility.

Use cases

When designing your empty states, consider the following use cases. The EmptyState component includes a dedicated illustration for each use case.

Something missing

• Title: What's missing or what's not configured?
• Details: How can the missing item be fixed? If there's no solution, provide the user with a return path.
• Actions: Based on context.
• Footer: Relevant links such as documentation or support articles, if applicable.

No result

• Title: What result or data can't the system find?
• Details: How to fix the state? Guide the user in adjusting filters, keywords, timeframe, etc.
• Actions: Based on context.
• Footer: Relevant links such as documentation or support articles, if applicable.

Something is wrong

• Title: What's the issue?
• Details: Describe the cause of the issue or the error code and possible solutions. If no solution is available, provide the user with a return path.
• Actions: Based on context, including “Refresh,” “Try again,” or “Go back,” etc.
• Footer: Relevant links such as documentation or support articles, if applicable.

Create new

• Title: What's the current state? What hasn't been created?
• Details: Describe what needs to be created and guidance or requirements for the creation.
• Actions: Based on context, including “Create,” “Get started,” or “Upload,” etc.
• Footer: Relevant links such as documentation or support articles, if applicable.

No permission

• Title: What permission is missing?
• Details: Provide a possible solution to get the permission. If no solution is available, provide the user with a return path.
• Actions: Based on context, including “Contact admin” or “Go back.”
• Footer: Relevant links such as documentation or support articles, if applicable.