Banners notifications state there is an issue, success, or significant status change within the current case or screen.
Notifications come in six different varieties.
Notifications are to be used sparingly and only for important information. They should appear at the top of the page and be relevant to the entire action or assignment. They can be configured to be dismissed.
Instructions for actions should be written as actions or commands. Examples for a notification description would be: "View item," "Edit record," or "Configure section." Messages should end in a period.
Info Notification Banner
General information banners are represented in blue and are used to give a user non-critical status update on a piece of information or action.
Error Notification Banner
Use the red status section to inform the user of errors in processing or that a failure in the process has occurred. Error messages should precisely state what the problem is and how the user can solve it.
Client-side errors appear during inline validation. Case level errors are server-side errors triggered on an attempt of advancing the flow.
If an action determines a significant change (i.e., deletion/discard) or permanent action, provide the user with an additional confirmation to denote the change they wish to make.
If an error is on the server side in a modal, follow the case or page level notifications.
Errors can be on form inputs as well.
Success Notification Banner
Confirmation or success banners use the green status section to inform the user of a success of a case and or when a task has been successfully completed.
Warning Notification Banner
Presented using the color yellow, the warning banner is meant to capture a user’s attention in a manner similar to the error banner; however, the issue presented to the user is much less critical.Looking for legacy UI Kit content?
Last updated: Jan 2020