Empty states tell users that there’s no content to display—and what they can do next.
- Autocomplete (not built)
- Avatar (not built)
- Button Group (not built)
- Checkbox Field
- Checkbox Group
- Date Picker (not built)
- Empty State
- Filter Drawer
- Global Notification
- Guidance Block
- Hero Card
- Icon Button
- Infinite Scroll (not built)
- Inline Notification
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Pagination (not built)
- Progress Bar (not built)
- Progress Stepper
- Radio Group
- Search Field (not built)
- Slider (not built)
- Split Button
- Text Field
- Tile (not built)
- Toast Notification
- Toggle Switch
- 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.
- Border style:
Empty states are a great way to engage and educate users. It’s a chance for our brand voice to shine through, but make sure to always prioritize clarity and action over joyful language and humor. Here are some rules to keep in mind:
Make sure your title is scannable. A user should be able to take away the main point of the empty state simply by reading the title. Your title should describe the empty state and not tell the user what to do (leave the action for the CTA button). Avoid phrases like “Oops!” Or “Looks like something went wrong…” Instead, describe exactly what has happened. Remember to keep it short and snappy. Any supplementary information can be included in the body copy under it.
- No reports found
- Survey in progress
- Oops! There are no reports!
- There’s nothing to see here
Never leave the user hanging. Always make sure you guide the user towards taking the next step. If there’s nothing for the user to do, suggest that they explore something else in the platform. If they’ve encountered an error, give them suggestions on how to fix that error or give them a link to contact our support team.
- Reports couldn’t be loaded.
Try refreshing this page, or [contact support] for help.
- This survey is currently collecting responses
Once the survey is closed, you’ll see the results on this page.
- Oh no! We couldn’t load your reports.
Please try again later
- There’s nothing to see here
The survey is open. We don’t have any information to show you right now.
Your CTA button should compliment the title of the empty state. If a user scans the title, the CTA button should clearly direct them towards an action.
- [Choose focus area]
- [Explore other reports]
- [Go to reports]
Based on the overall user flow and the nature of the empty state, make sure you adjust your tone accordingly. A positive empty state should contain encouraging language, while an action empty state should get to the point quickly. Here are some helpful tips for each type of empty state:
- Positive empty state - Include words of affirmation here. If a user has nothing left to do after this point, let them know that. Be careful though, as this type of language can sometimes come off as condescending.
- Informative empty state - Reassure the user that work is being done in the background and that we’ll notify them when there’s data on that page for them to see or action. This is an opportunity to educate.
- Action empty state - Let the user know that in order for them to see any data here, they’re going to need to perform certain actions. Guide them towards that action clearly and include a CTA button that takes them directly towards completing that action.
- Neutral empty state - Let the user know that nothing is required of them. Guide them back to where they were before they encountered this empty state.
- Negative empty state - Clearly let the user know what has happened and how they can fix it (if they want). If the empty state keeps showing up, give them an option to contact support. For example, if a user is trying to view a report they don’t have access to, your message could say, “You don’t have access to this report. If you’d like to view this report, contact your account administrator.” Remember to avoid jargon and tech speak.
All empty state copy should be in sentence case i.e. the first letter of the first word is capitalized and everything else is in lower case unless it’s a proper noun or feature name. Always err on the side of minimal punctuation, so leave out full stops and commas where possible.
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.
- Each type of empty state comes with a standard illustration. Do not mix and match.
- 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.
- 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.
- 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.
Here are some examples of other existing design systems: