Empty State
Used whenever a screen has no items to shown. It
helps the user letting him know that a search has lead to no results or the
system is waiting for an input.
Use Cases
- When reporting no results on a general search of content.
- When a screen or a container is reporting null content of any type (actions, tasks, entries).
There’s still some information missing!
Use the filter above to refine your search criteria. The results will be displayed in here automatically.
There’s still some information missing!
Use the filter above to refine your search criteria. The results will be displayed in here automatically.There’s still some information missing!
Use the filter above to refine your search criteria. The results will be displayed in here automatically.
HTML
Do's & Dont's
An opportunity to share a message
The lack of on-screen content is a good moment to bring the users
general information about our applications.
When crafting the message, be concise, kind and professional. Always make sure that the illustrations are relevant to the context. It is a valuable opportunity to instruct, inform, and celebrate but avoid referring users to other sections.
When crafting the message, be concise, kind and professional. Always make sure that the illustrations are relevant to the context. It is a valuable opportunity to instruct, inform, and celebrate but avoid referring users to other sections.
Actions can be used, whenever relevant
In some cases, the user could find useful a function of the system
for his purposes.
If convenient, you can include a CTA (Call to Action) at the bottom of the Empty State, helping the user to continue the task.
Remember to keep it short and relevant.
If convenient, you can include a CTA (Call to Action) at the bottom of the Empty State, helping the user to continue the task.
Remember to keep it short and relevant.
Use on containers, not on components
An Empty states indicator only works when content is expected on a
screen or specific section.
Do not use Empty states layout when a single component or even if a group of components are showing no information.
Do not use Empty states layout when a single component or even if a group of components are showing no information.
Alternative and Related components
