Also known as:
Zero StateEmpty wellStarter contentEducational content

Empty State

Empty states tell users that there’s no content to display—and what they can do next.

Need to know

  • Empty states communicate the current state, allowing users to feel in control of the system, take appropriate actions to reach their goal, and ultimately trust the brand.
  • Without an empty state, people are confused about what to do next.

Options

  • Mood:
    • Default
    • Positive
    • Informative
    • Cautionary
    • Negative
  • Border style:
    • Solid
    • Dashed
    • None

To keep in mind

  • There are different Empty States including:

    • Positive empty state: nothing is here because everything is working/you’ve completed all tasks.
    • Informative empty state: things are happening and there are things to be done but no direct action required.
    • Action empty state: we need the user to do something right now.
    • Neutral empty state: nothing has happened/we have nothing to show.
    • Negative empty state: something didn’t load/we couldn’t find anything.
  • They also come in three different sizes for you to use (max, mid, min):

    • For viewports or containers larger than 1080px: show an empty pattern that’s 1080px wide (e.g. using max-width: 1080px) using the “large” layout.
    • For viewports or containers smaller than 720px: show a responsive, scaling empty pattern (e.g. using max-width: 100%).
    • For viewports or containers between 300px and 720px: use the “medium” layout.
    • For viewports or containers smaller than 300px: use the “small” layout.
  • Call To Actions (CTAs):

    • We use Default Buttons unless it is the only action on the page, then we use Primary Action Buttons (label + icon).
    • If no action is appropriate, don’t show a button. Instead, you might include hyperlinks in the body copy as needed.
  • Illustrations:

    • Each type of empty state comes with a standard illustration. Do not mix and match.
  • Copy:

    • The headline aids scanning: people can take action from this without reading the body.
    • The body text adds detail: people get extra value from reading additional detail.
    • The Call To Action (CTA) button: people know exactly what to do next. This draws attention to the most logical action, helping people move from the empty state to a situation where the page is useful to them.
    • Each type of empty state suggests different kinds of copy:
      • Positive empty state - Words of affirmation. Create curiosity, enable education, and guide them in the right direction with delight.
      • (TBD) Informative empty state - Keep it brief. Optional opportunity to educate the user.
      • (TBD) Action empty state - Inform users of specific action they need to take. Arm them with the info they need to do that.
      • Neutral empty state - Let people know that nothing is required of them.
      • Negative empty state - See our language guide on errors

When to use

  • Use empty states when you don’t have anything else to show. It is the only content on the page. There might be navigation present in addition to the empty state.
  • You might use a negative empty state for an intentionally negative state where the system is operating correctly and the user has provided accurate information.

When not to use

  • Don’t use empty states to provide feedback about a change in state or context that the user needs to be notified about during a task.
  • Don’t use empty states when something negative has happened because the system failed or is a direct result of the user providing bad input.

See also

  • When there’s complex content or behaviour, use a well instead. For example, showing deleted content with undo.
  • When there’s content on the page but you need to inform the user, use an inline notification instead.
  • When there’s a change in state or context you need to inform the user about, use an inline notification instead.
  • When something negative has happened because the system failed or is a direct result of the user providing bad input, use an error notification instead.
  • Hero data pattern.

External Links

Here are some examples of other existing design systems: