Empty states are moments designed to prevent confusion when the primary contents of a page cannot be displayed.
Empty states can be made up of four descriptive parts:
- An image graphic saved out as an SVG.
- A headline stating why the user can’t access the content.
- An subtext with further details or guidance to access the content.
- A call-to-action primary button for any immediate action the user can take to access content.
- A secondary call-to-action default button for any additional tasks a user may take. (e.g. “I’ll do this later”)