Consider the error situation
When creating an error message, ask the following questions. The answers will help determine which component to use and where to place it.
- What triggers the error?
- What is happening in the background?
- Is it a contextual error or a general error?
- Is the error related to a specific UI element?
- How consequential is the error?
- How complicated is the error?
- How is the error resolved?
Error hierarchy
Errors on a page
Errors in a sidebar
Choose a component
System and API errors
| Error | Description | Component |
|---|---|---|
| Global error | Generated by the system or API.For example, the system cannot connect to the network or data is not sent from a related system because of problems with the system.Cannot be resolved by the user. | Message full-width and pinned to the bottom of the app bar (pushing the rest of the content down).orError state in the associated data container. For example, a dashboard, table, tile, sidebar, or full page. |
| Background process error | Background process fails.Can be caused by a previous action on the same page or a previous page.For example, automatic data import cannot be completed.Usually requires user intervention to resolve the error. | Message above the page content, below the top navigation bar.Note: Display error messages generated by asynchronous actions in the notification center. |
| Permissions error | There are issues with the user's account (not the user input).For example, the user has reached their maximum limit for adding items.Cannot be resolved by the user. | Message below the sidebar content. |
User action errors
| Error | Description | Component |
|---|---|---|
| Component error state | User input does not meet data or format requirements for a component.There is an error state for the component. | Message at the top of the page with links to the error state message for each affected component. |
| Validation error | User input meets a component's data and format requirements.There's a different issue with the input. For example individual figures have an incorrect total or there's no match for the data in the database. | If the component is in a sidebar: message above the sidebar content.If the component is on the main page: message close to the affected component. |
| Data input error | User input is not in an accepted format.There is no error state for the component and no space to display a message directly above it. For example, a table with an error on a table row. | Message close to the affected component. |
| Data access error | Configuration is needed so the user can access the data.The user does not have permission to view the data. | Error state in the associated data container. For example, a dashboard, table, tile, sidebar, or full page. |
| Unsupported action | The user tries to perform an unsupported action. For example, upload an unsupported file type. | Error state in the associated data container. For example, a dashboard, table, tile, sidebar, or full page. |