<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Empty State

An indication to the user that there is no content to display in the current view. Provides an explanation and the next best action.
styleKeys: emptyState

Use Empty State...

  • When there is no content to display in a particular section of the UI. For example, when a user clears a screen, finishes a piece of work, completes a task, or has no data in a particular location.
  • To create an opportunity to engage users positively by providing context, direction and guidance on how best to start, continue or complete a task.

Don't use Empty State...

  • For validating user inputs. Instead, use a FormError on Standard Form.

The preview has been updated.

Illustration

An illustration can be placed inside of an Empty State. On EmptyStateIllustration, use illustrationType to set the illustration according to the semantic intent of the Empty State content.

Title

The EmptyStateTitle subcomponent should contain the problem definition to explain why the view is empty. See Problem definition for more information.

Description

The EmptyStateDescription subcomponent should contain the solution definition to outline the next steps. See Solution definition for more information.

Actions

The EmptyStateActions subcomponent should contain the next best action to get the user back on task. See Next best action for more information.

The preview has been updated.

Footer

The EmptyStateFooter subcomponent can be used to provide additional information or ancillary links that are tangential to the task at hand. See Additional information for more information.

Size

Use size="large" to increase the size of an Empty State. Potential uses include full-page empty states such as an error page.

The preview has been updated.

Anatomy

All Empty State content should inform and guide users by explaining what's happened and why, by explaining what path(s) the user can take to resolve or progress their experience, and including paths to 'learn more' or cancel/abandon.

Problem definition

Present the problem and why it happened. Wherever possible, each Empty State should present a single problem. This is usually represented by the EmptyStateTile subcomponent.

Solution definition

Describe how to resolve the scenario and/or progress in a valuable direction. Some Empty States may have more than one solution. This is usually represented by the EmptyStateDescription subcomponent.

Next best action

Present clear actions, such as Buttons or Inputs to enable users to progress in a valuable direction. A single action is preferred, however some cases may call for two or three actions. This is usually represented by the EmptyStateActions subcomponent.

Next best actions should use imperative verbs instead of vague or overly-technical terms. Words should be meaningful in context.

Imperative verbs: Try, Remove, Explore, Upload, Copy, Create
Vague or overly-technical terms: Get, Go, Clone

Additional information (optional)

In addition to the next best action, you may provide supporting information or a link for users to learn more. This is usually represented by the EmptyStateFooter subcomponent.

The preview has been updated.

The preview has been updated.

The preview has been updated.

General principles

  • Use Empty States as an opportunity to encourage people to interact further with our products and services. They’re a good way to educate people about where they can go next or motivate them to explore.
  • Use actionable and instructive language.
  • Avoid dead-ends.
  • Keep focus on clarity and user guidance.
  • Display contextual information or suggestions to prompt the user to continue in their journey. This is a unique opportunity to weave in a more curated experience based on customer data and past purchases. For example:
    • Subscriptions: guide users to explore new plans.
    • Empty cart: prompt users to continue shopping with potential upsell opportunities or areas to explore.
    • Where relevant, encourage product discovery with ‘Buy it again’.

Layout

The Empty State component doesn't reserve space around itself. As a general rule, when placing the Empty State within a layout, use the token sem.space.6 above and below the component.

Scenarios

Empty States fall into two scenarios:

Dynamic

A customer action populates the Empty State. Dynamic scenarios involve customizing the Empty State by integrating customer data. Customer interests or past purchases populate an action.

For example, when a customer finishes creating a new logo, we present a chance to add it to business cards (because they ordered some last year).

Fixed

There is nothing the customer can do to populate the Empty State. The next best action in fixed scenarios would be a generic CTA or another helpful link.

For example, when a customer visits their Orders page before they've made an order, we present an Empty State informing them that orders will appear in this place. We could suggest one or more shopping categories as the next best action.

Props

EmptyState
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
size"standard" | "large"false
Use `standard` size for most empty state content. Use `large` size for full-page empty states
standard
EmptyStateIllustration
This component is implemented using the <img /> as the root element. You can utilize the native attributes supported by <img /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
illustrationType"generic"true
Type of illustration to display
null
EmptyStateTitle
This component is implemented using the <p /> as the root element. You can utilize the native attributes supported by <p /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
EmptyStateDescription
This component is implemented using the <p /> as the root element. You can utilize the native attributes supported by <p /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
EmptyStateActions
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
EmptyStateFooter
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.