Skip to main content
On this page

Empty State

Let users know when there is nothing to show.

When to use​

  • When users have navigated to the right place but there is nothing to display, for example a list with no items or a table with no results
  • When a search or filter returns no matches
  • In cards, table containers, or page sections that would otherwise be blank

When not to use​

  • For a null value within an otherwise populated list or table - use a short negative phrase such as "None" inline in the cell instead.
  • While data is still loading - use Skeleton Loading instead. Showing an empty state before data has arrived misleads the user into thinking the data does not exist.
  • For error states - Empty State must not be used for error states. Use Notification to communicate errors instead.
  • For 404 Page Not Found - handle this at the application level, not with this component.
  • In very small or constrained spaces - the component requires enough padding to breathe. If the available space cannot accommodate it, use plain text instead.

Anatomy​

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

Basic usage​

Loading...
Edit live code
<EmptyState
  title="No bills on this account"
  description="The first bill hasn't issued yet"
/>

Variants and features​

With action​

An action gives users a direct path to resolve the empty state, for example adding the first item to an empty list or clearing a filter that returned no results.

Only include an action when it directly addresses the reason for the empty state. If completing the action would not populate the space, do not include it.

Loading...
Edit live code
<EmptyState
  title="No meter reads on this meter"
  description="Submit the first reading to start tracking usage"
  action={{
    label: 'Submit meter read',
    onClick: () => alert('Submit meter read clicked'),
  }}
/>

Content​

Title​

Every empty state must have a title. Use one of these two patterns:

  • For empty datasets: "No [objects] on this [entity]", for example "No meter reads on this meter" or "No transactions on this account"
  • For search or filter results: "No [objects] found for this [search/filter]", for example "No accounts found for this filter"

The word "found" in the second pattern makes it clear the system searched successfully but returned no results.

Description​

Descriptions are optional. Use them to explain why the space is empty or what the user can do next. Keep to a single sentence. Do not repeat or paraphrase the title.

Action label​

Action labels should be specific and direct. Write them as a verb followed by the object, for example "Add transaction" or "Clear filters". Avoid generic labels such as "Get started" that do not describe what happens next.