Handling errors
Author: Tina Yip | Last edit: December 05, 2023 | Design type: Error state | Product area: Ansible
System Errors
When there are system-level errors for the platform, the banner component should be used and placed at the top of the body of the screen, right under the masthead. We recommend using the status banner and following these guidelines from the alert component for the banner type.
System-level error banners can stack indefinitely, but we would recommend showing 3 banners max. Hopefully there wouldn't be the need to show more than one banner at a time anyway as hat would indicate errors overall with the application itself.
Page errors
For page-level errors, we have a template error state that we use across the platform. This can be used in tabbed areas as well.
The text would read: “Something went wrong”
The subtext would read: “Please refresh the page by using the button below.”
Form validation
When a user is filling out a form and tries to save it but there is an error, an error message should appear under the specific form element. An error icon would appear within the field and be right aligned to the field. The form element would have a red baseline and the primary button would change to a secondary error state.
