Errors and Alerts

Error and alert messages provide contextual and actionable feedback to help users move forward in their workflow.

Error or Alert?


Errors identify and explain critical information that users must address before proceeding. Error messages should provide details on how to resolve the issue when possible. As detailed in the Notifications article, error messages are often accompanied by a supplementary visual indicator in the color Cinnamon 500. Although color is a great visual indicator for users without disabilities, text should always be used to distinguish errors and alerts on a page.


Alerts convey non-critical information that may help the user prevent a future error but don’t require attention or action for the user to move forward. Alert messages can give users a warning about the potential unknown or irreversible consequences of their actions before they commit them. Alert messages are often accompanied by a supplementary visual indicator in the color Cantaloupe 400.

When do Errors and Alerts Appear?

Form Validation

Users most commonly encounter errors and alerts when filling out forms. Forms can validate errors and alerts “onBlur” or “onSubmit”.

  • onBlur error and alert validation occurs when a user shifts focus out of the input, such as by tabbing to another element or clicking out of the input. This immediate form of feedback allows users to address errors and alerts as they make their way through a form.
  • onSubmit validations occur when the system detects an issue after the user tries to move forward in their workflow, by activating a button. When the button is activated, the system checks the entire page for errors or alerts. If errors and alerts are detected, the system applies error and alert styling to the elements associated with the issue. onClick error validation is preferred for accessibility.

Focus behavior differs between “onBlur” and “onSubmit” validations

  • Do not shift focus if an error validates onBlur. Because these validations occur inline when a user changes focus by tabbing or clicking out of the input, intercepting the user’s navigation to bring the focus state back to the element containing the error or alert message results in a jarring and unexpected user experience and creates a keyboard trap for users who depend on the keyboard only to navigate. Keyboard traps prevent users from escaping the input until the error is corrected and are considered serious accessibility blockers.
  • When errors and alerts appear on submit, move focus to the list of errors and alerts, such as to the Banner or Modal component.

System Detects an Error or Alert

Errors and alerts can also occur when the server is unable to retrieve information or fails to complete a request. The system then communicates that something went wrong and explains why the issue occurred, if possible.

Sometimes the error is unknown and no solution can be provided other than to try again later. These errors and alerts are commonly detected when the system fails to load data due to the user’s permissions, system performance issues, or poor network connection.

Message Hierarchy

Error and alert messages should be easy to locate and associate with their corresponding attribute. Specific visual treatments that accompany error and alert messages vary based on what the message is tied to.


A Prompt with an error message that reads “Your available balance for this time off is less than you are requesting. Please reduce the amount you are requesting or choose another Time Type.” A Drop-down Menu with an alert message that reads “The location of the course you selected is different than your primary work location.

Errors and alerts that are associated to specific elements on the page use a combination of message and visual cues to help the user locate and address them. In the example above, element-level messages are prefixed by “Error” and “Alert” text labels. These labels make it easier for users to identify errors and alerts for low-vision and color-blind users.


A Modal component containing two errors. A list of the two errors is positioned at the top of the Modal. The corresponding Modal elements in error have a red border and an error message positioned directly below the inputs.

Certain containers provide additional, localized cues to help draw attention to errors and alerts that are easy to scroll past or hard to find. For example, Modal components display a collapsible list of errors and alerts at the top of the container. Activating these links brings keyboard focus to the corresponding error, allowing users to navigate to these issues quickly.


Page-level errors and alerts display issues that aren’t tied to one specific element on a page.

Error Banner with 1 Error and Modal component. Modal reads: ‘Page Error. Change the itemized amounts or add another itemized line to equal the amount of this expense.’

This could happen when the combined values of several fields together produce an error. In the example above, a Modal component appears when a user activates the Banner component positioned at the top of the page. The Modal communicates a page error has been detected because the items in the expense report do not equal to the total amount expensed.

Modal component that reads: ‘Access Denied. Your permissions have changed or the design was deleted.’

Page-level errors can also occur in response to security restrictions or when an object no longer exists. In the example above, a Modal component communicates to the user that access to a file has been denied because the file was either deleted or the user’s access is restricted.


Global error message on native mobile device. The message reads “You’re offline. Check your Wifi or data connection.”. The button below reads “Refresh Page”

Global errors alert users when something affects the system at large. An example of a global error occurs when the server cannot retrieve information for a page due to an internet disruption. In this native mobile example, the user is shown a full-page error message telling the user that they are offline and instructs the user to refresh the page when a connection has been established.


Although some examples of error and alert messages are included here, please refer to the Error and Alert Messages section of the Content Style Guide to see more detailed information on how to write messages that are precise, constructive, and specific to the user’s context.

What Went WrongWhen the Message AppearsUI SolutionExample Message
User enters a value in an input that doesn’t meet the form requirements.Dynamic form validation: User shifts focus away from inputBanner: inline error messageEnter an End Date that is in the future.
User submits the form but has skipped over required fields.Submit form validation: User activates action button to move forward in the processBanner: inline error messageEnter values for the following fields: Expense Report; Expense Amount.
User itemizes an expense but the total amounts don’t add up.Submit form validation: User activates action button to submit the formBanner: page-level error message and inline error message, if possibleYour remaining balance for this expense report is less than the per unit amount entered. Reduce the amount you are requesting.
User tries to save a document with the same name as an existing document.System detects an errorModal: page-level errorThere’s already a file named “Journey Maps”. Enter a new name for this file or replace the existing file. [Replace][cancel]
User tries to load a report but runs into a performance issue and the server is slow to load content.System detects an errorModal: page-level alertProcessing your request. You can keep working while this runs in the background, and we’ll notify you when the report is ready. [Notify Me Later][cancel]
Internet connection has been interrupted and cannot load the page.System detects an errorEmpty State: global errorYou’re Offline Check your Wifi or data connection. [Refresh Page]

Error Prevention

Aim to design an interface that prevents a user from encountering an error in the first place. Here are a few examples of how design can help prevent errors before they happen.

  • Use Modal components to act as a safeguard for user actions that could produce critical errors where data will be permanently deleted or that are difficult to undo. Actions on the Modal component will allow the user to confirm the action or take an alternate route.
  • Disable an element that a user doesn’t have access to select but still needs disclosure to. Hide elements the user doesn’t need disclosure or access to.
  • Add help text where necessary to provide clarity and additional instruction for users in completing a task.

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section