Banner notifications

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.

info notification banner, blue is used for general information

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.

error notification banner, red is used for errors, issues, and negative notices

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.

success notification banner, green is used for success or positive notices

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.

warning notification banner, yellow is used for warnings, but not errors

Last updated: Jan 2020