---
title: "Empty State"
navTitle: "Empty State"
summaryParagraph: Empty states tell users that there’s no content to display—and what they can do next.
tags: ["Zero State", "Empty well", "Starter content", "Educational content"]
needToKnow:
- 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.
demoStoryId: emptystate-react--default-kaizen-site-demo
---
## Visuals
### UI Kit
### Examples
## 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](/components/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](/components/inline-notification) instead.
* When there’s a change in state or context you need to inform the user about, use an [inline notification](/components/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](/components/inline-notification) instead.
* Hero data pattern.
## External Links
Here are some examples of other existing design systems:
- [Lightning: Empty State](https://www.lightningdesignsystem.com/guidelines/empty-state/#site-main-content).
- [Material: Empty State](https://material.io/design/communication/empty-states.html#content).
- [Predix UI: Empty State](https://www.predix-ui.com/#/design/communication/empty-states).
- [Quickbooks: Zero State](https://designsystem.quickbooks.com/pattern/zero-states/).
- [Spectre: Empty](https://picturepan2.github.io/spectre/components/empty.html).