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