Notifications are banners stating there is an issue, success, or major status change within the current case or screen.

Notifications come in six different varieties.

Usage

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.

Instructions, and tooltips for actions should be written as actions or commands. Examples for a tooltip would be: "View item", "Edit record", or "Configure section".

Messages should end in a period. They can be configured to be dismissed.

Confirmation messages

Use the green status section to inform the user of success of a case and or when a task has been successfully completed.

Inactive or deprecation messages

If the case is inactive or has been deprecated, use the purple status section.

Error messages

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 attempt of advancing the flow.

If an action determines a major 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/page level notifications.

Errors can be on form inputs as well.

Offline

Users need to be informed if they are offline or have otherwise lost their connection, so they know their data is not currently syncing.

Any element that is not able to refresh because it is offline should show a custom state to inform the user of this status and is presented as an empty state. The icon and text can be customized for the needs of a specific application, but the treatment should remain the same. In the next release, the loss of connection icon will be added to the core icon font.