Errors
beta

Error states occur when the app fails to complete an expected action. This can happen due to system failure or user error. It's important to communicate error states to the user, especially on user error, so they can resolve the issue.

Note: Resize window to view components at various breakpoints.

If the error affects the entire page on load, such as a server error, use the universal message paradigm at the top of the page, nearest to the content that is affected. Read more about Universal Messaging.


If an error affects the entire page, but doesn't cause the page to reload, use a toast. Read more about Toasts.

This is an error toast
This is an error toast

If there is an error in a specific form element, the error message should appear below the element. Read more about Form Elements.

If an error only affects part of the page, such as a status message or user error, use an inline message style. We have two versions of this style, one with an icon and one without. The icon can appear next to the error text or to the part of the page that is affected.

warning current-utility-bill.png
current-utility-bill.png
current-utility-bill.png