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

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.

Actions

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

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.

Solution definition

Describe how to resolve the scenario and/or progress in a valuable direction. Some Empty States may have more than one solution.

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.

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

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

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.