Empty State

Overview

When to use

• To let users know they are looking in the right place, but there is nothing to show
• When searching or filtering returns no results
• In cards, tables or pages

When not to use

• For null data items in a list or table - use an em-dash — or a negative assertion, e.g. None instead
• In very small or constrained spaces
• On initial page load, when data is still being retrieved - use skeletons instead
• For page errors - use error notification instead
• For 404 Page Not Found - this is already defined at application level

Anatomy

1. Icon
2. Title
3. Description
4. Action

Usage

Edit live code
<EmptyState
  title="No bills on this account"
  description="The first bill hasn't issued yet"
  action={{label: "Send bill now"}}
/>
<EmptyState
  title="No bills on this account"
  description="The first bill hasn't issued yet"
  action={{label: "Send bill now"}}
/>

Empty state action

An action provides a clear path forward for the user to resolve the empty state. Empty state actions are optional.

Guidelines

• Be direct - provide an action that helps the user populate the space or clear the current view, e.g. ‘Add transaction’ for a new list, or ‘Clear filters’ for no search results.
• Maintain context - the action must relate directly to the missing content. Providing an unrelated action can be disorienting.
  • Do: In an empty transactions table, provide an ‘Add transaction’ button
  • Don't: In an empty transactions table, provide a ‘Send bill’ button, as completing this action will not resolve the empty state of the table

Content

Title

Every empty state must contain a title, which provides a high-level summary of the state. Use one of the following two patterns to ensure consistency:

• For empty datasets: No {objects} on this {entity}, e.g. ‘No meter reads on this meter’.
• For search or filtering results: No {objects} found for this {search/filter}, e.g. ‘No bills found for this filter’. Including ‘found’ makes it clear that the system has successfully performed the search but returned no results.

Description

Descriptions provide additional context about why the space is empty, or offer specific guidance on how to proceed. Descriptions are optional.

Guidelines

• Be concise - limit the description to a single, clear sentence.
• Don’t repeat the title - use the description to explain the cause or the solution.
• Keep the language helpful and neutral - avoid blaming the user for no results.

Properties

EmptyState