Skip to main content

Error State

Error states in an app occur when the user encounters either server error or non existent link to a certain content. Despite being challenging, these situations present excellent opportunities to communicate what the user would see with data and offer helpful advice on what to do next.


Similar to empty states, error states can also be categorized into two categories.

  • Page level
  • Container level

Page level

Page level illustrations are when there are no data to be displayed in the entire page or there has been a service error that restricts the user from successfully applying an action.

Page level error illustration

Container level

Error can occur in smaller sections of a UI as we consider microtransactions. In such scenarios, container level error messages provide information on why a certain error occured and what remedy can be taken to overcome the error.

Container level error states


Error illustration are empty states that enable us to manage errors when the user hits a roadblock. With error management illustrations, it provides user to recognize, diagnose and recover from error states. Guiding them with specific action item allows user to take next step diligently.

When to use: When the page does not exist or has been replaced. 404 error


When to use

  • The entire screen is blank and corresponding error state is displayed. The action item guides user with the necessary steps to proceed further.
  • Use a navigational link if the user is being navigated away from the page.
  • Use a CTA button if an action can be performed within the page.

Container level states

  • Depending upon the availability of the sections, number of errors might occur. Following variations of container level error state can be used.
  • Using a common icon that indicates error should be used by itself, when or without spot illustration.
  • Spot illustrations are optional, but consider applying secondary colors when used.
  • Text should be in red-500 as provided by included in the color system.
Container level Container level
Container level with spot and action itemContainer level without spot illustration
Container level Container level
Container level with icon and textContainer level with text only

Designer assets

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact GEL Community.

Developer API


Empty state and error illustrations are specific to GEL only and is not available in PrimeVue.