UI states are used to inform users about the various states a page or container can be.
UI states are used to inform users about the various states a page or container can be. There can be 4 possible states for a typical workflow:
A typical process starts with loading the app first. If we go step by step -
State | Content type | Loader type |
---|---|---|
Loading the app | Unpredictable | Spinner |
Loading page template | Predictable | Skeleton |
Making API calls | Data can be empty | Spinner |
Making API calls | Data will always be present | Skeleton |
Searching | Data can be empty | Spinner |
Changing page | Data will always be present | Skeleton |
State | Content | Card |
---|---|---|
No content available | Blank screen with illustration Educate the content about this module Call to action (Create, search, etc) | No |
No search results | No results illustration | Yes, if previously present |
Error (page not loaded) | Blank screen with error illustration Retry button | No |
Error (search/filter/pagination) | Toast with the error message and 'Try again' action | Yes, if previously present |
Property | Value(s) | Default value |
---|---|---|
Illustration | Image Image size Height - 128px Width - Dynamic as per the height, maintaining the aspect ratio | - |
Title | <title> | We didn't find a match |
Description | <description> | Try adjusting your search to find what you are looking for. |
Button | Label | Try again |
Property | Value(s) | Default value |
---|---|---|
Illustration | Image Image size Height - 256px Width - Dynamic as per the height, maintaining the aspect ratio | - |
Title | <title> | Manage your outreach camaigns |
Description | <description> | Campaigns let you reach out to patients with messages, emails and voice calls. |
Button | Label | New campaign |