Components

Empty State

Empty states are moments designed to prevent confusion when the primary contents of a page cannot be displayed.

Guidelines

Empty states can be made up of four descriptive parts:

  1. An image graphic saved out as an SVG.
  2. A headline stating why the user can’t access the content.
  3. An subtext with further details or guidance to access the content.
    (Optional)
  4. A call-to-action primary button for any immediate action the user can take to access content.
    (Optional)
  5. A secondary call-to-action default button for any additional tasks a user may take. (e.g. “I’ll do this later”)
    (Optional)