Notification
Notification
Usage
Notifications are brief messages that provide immediate feedback in response to user’s actions or system change inside the application. There are two types of notifications, persistent which are the alerts and temporary which are the toasts.
Behaviour
Notification appears on the screen as a result of the user’s action or system change
Notification messages use a combination of icons and colours to show the meaning and information importance level to the user
Notification can be dismissed by clicking the contained button or, in case of toast, it can disappear after being displayed on the user interface for a certain time
Best Practices
Use this component if you need to communicate information to users in a prominent way
Notification content should clearly explain what change has happened or will happen
Only one notification can be shown on the screen at the time
Alerts
Alert notifications appear inside the page content and inherit the width of the container they are put in. They are usually placed towards the top of the screen. There are two types of alerts that are persistent: Banner and Flag.
Persistent notifications
The persistent notifications show important messages that need to keep the attention of the user, allowing the user to ignore them or interact with them at any time. They are preferably used to alert of critical messages, however a standard version for neutral messages is available as well. They can allow different inline actions, but they always require a user action to be dismissed.
Banner alert
Banners come in 3 variations: Warning, Danger, Info. Their language should be direct and concise, as it’s recommended that they display one line of text. They can be placed either on the top of the page for page level informations, or inside the module to provide informations relevant to the module only. They can allow one or more action through multiple contained button or a hyperlink inside the content.
Flag alert
Flags come in 2 variations: Warning and Danger. They are used to show only critical messages that depend on third party causes (ex. server errors, internet connection). These disappear when the issue is resolved. They are placed on the top right of the screen, overlaying the content and following the scroll until dismissed. If more notification types (flags and toasts) are displayed at the same time, they are stacked on top of each other, with the most recent one being on the top (and thus pushing others below).
Multiple alerts
Multiple alerts can be used however they should be used sparingly. They are used to show a summary of issues the user needs to action with them at any time. They can allow one or more action through multiple contained button or a hyperlink inside the content.
Each notification must first have a summary title that explains that there are multiple notifications that the user needs to resolve. Each notification underneath have a divider as well as a title and summary. The summary can have bullet points or numbered actions but do not number the title (see below)
Behaviour
Alert appears as a feedback for a user or system action, as a part of the page content
Flag alert should not be dismissible until the content it is referring to is fixed.
Best Practices
Use alerts to communicate permanent changes by the system (for example that the campaign or user is deactivated)
Use alerts to display longer textual feedback on a users action. that wouldn’t fit into the toast notification
Alert style
Notification types are: Info, Danger, Success and Warning
Content padding is 16px
Icon size is 20px, and font size 14px with line-height 20px
Alert - Banners Style
Toasts / Snackbar
Toast notifications appear temporarily, towards the top right of the screen. They shouldn’t interrupt the user experience, and they will disappear after a short amount of time.
Behaviour
Toast appears as a feedback for a user or system action, below the page title or secondary navigation on the top right
Default display time for a confirmation toast notification is 4 seconds, while the toast notification with error message stays shown until the user clicks to close it
Width of the toast can align to the width of the text, with the maximum width size 400px
Best Practices
Use toasts to communicate the needed changes when validating form input
Use toasts to display low priority information and alerts to display medium or high priority information
Toasts style
Notification types are: Info, Danger, Success and Warning
Content padding is 16px
Icon size is 20px, and font size 14px with line-height 20px
Notification panel
Notification panels are helpful for users who receive a large number of system-generated notifications or messages that may need to be referenced later.
Notification panels ensure that users can access and read all notifications messages without cluttering the screen with too many notifications. They also provide a consistent experience to users who need more time to read notifications.
Best practices:
Give users the ability to manage notification preferences.
Don’t send the same notification multiple times if users don’t interact with it.
List notifications in chronological order.
Notifications can be grouped by source or urgency.
Notification panel states
Example of notifications in a panel
Notification message
Notification messages are helpful for users who receive a large number of user-generated messages or may need to reference these messages later. These messages are generated by the admin to convey a message to the other users.
Notification panels ensure that users can access and read all notifications without cluttering the screen with too many messages. They also provide a consistent experience to users who need more time to read notifications, use a screen reader, or prefer to limit the notifications they receive.
Best Practices
A toast notification can be sent to remind the user there are unread messages in panel.
Give users the ability to manage message notifications preferences.
Don’t send the same message notifications multiple times if users don’t interact with it.
List message notifications in chronological order.
Message states
Example of notification messages in a panel
Last updated
