EmptyState

Use the EmptyState to communicate that no data is available for a section or view and guide users toward resolving the situation with a clear title, description, and actions.

OverviewPropertiesUsage

When to use

• To communicate that no data is available for a section or view and guide users toward resolving the situation.

When not to use

• When the absence of data is expected and requires no user action. Display a simple message instead.

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 context 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 aria-label for accessibility.

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

Something missing

The user hasn't configured or enabled a setting or feature and the data can't be displayed.

Content structure

• 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.

Example

No result

Use the no result empty state when the system can't find any data to display, as in the following scenarios:

• No matching results for the keywords/filters/parameters used.
• No results available (identifiable or unknown reason).
• No matching results because of missing permissions.
• The page doesn't exist or isn't available (404).

Content structure

• 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.

Example

Something is wrong

In the something is wrong empty state, the system can't load the data or the user performed an action that triggered an error, as in the following scenarios:

• The system can't load the data due to an error (identifiable or unknown).
• The user performed an action that triggered an error.
• The page doesn't exist or isn't available (404).

Content structure

• 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.

Example

Create new

Use the create new empty state when the user needs to add, upload, or create items/data, as in the following scenarios:

• The user visits the page for the first time and no items/data have yet been created.
• The user needs to select an existing item or add, upload, or create item/data.

Content structure

• 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.

Example

No permission

Use the no permission empty state when the user has limited or no permissions to create/view/edit data.

Content structure

• 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.

Example