Device (Tabs)
Desktop
System (OS)
Web
Language (i18n)
English
Description
An actionable empty state provides guidance and a clear call to action when a section or application has no content. It helps users understand how to get started, add data, or resolve the empty condition, often appearing during onboarding or initial use.
VotesUp
VotesDown
Pattern ID
66
UX Flows
Onboarding
Awareness
UI Components
Loader
Empty State
Version
2.1.14
Â
Google Slides
_19.04.51.png?table=block&id=c9b88fac-62bb-47ff-966c-7ff44c98dbdd&cache=v2)
_19.04.59.png?table=block&id=89bb7ea5-7563-4e13-8c5c-57792d5c50c0&cache=v2)
Â
Why is this a good pattern?
- Show and make it easy to find the first action without navigating menus.
- Use object-context to link the actionable element where the object should be created.
- Dotted line and italic text reinforce the actionable element.
Â