Notification

Use notifications to notify users about important events.

Choose the notification component appropriately to its relevance of notifications, as they can be interruptive. We offer these components:

Inline notifications, these are minimal invasive as they blend into the interface
Toaster notifications, these draw some more attention, without being too interruptive as text appear temporary on a the edge of the screen
Modal notifications, these force the user to perceive them as they block the whole screen until the user interacted with it

There are four types of notifications, each with their own styles: info, warning, error, and success.

Inline notifications#

When to use: Use inline notifications whenever you the screen does not change and you just need to add a information. This is for example often used for error messages within a form, which stop the form from being closed successfully.
Description: Inline notification appear within the content. They should be as close as possible to the element that they refer to or that has triggered the notification.
Behaviour: Inline notifications can either be shown on start a view (if they are static) or they can pop up (if they are dynamic). They may disappear when they are not of relevance any longer. (e.G. an error notification in a form disappears when the user has solved the issue)
Components to use: Notification

When to use: Use toast notifications when you want the user to perceive the message without interrupting them too much.
Description: Toast notifications convey short messages + an icon to indicate the type (info, warning, error or success). They may also carry a button to open a modal, which can be used to show longer messages.
Behaviour: Toast notifications appear temporary. We recommend to show them at the top right corner of the screen. They should be visible for some seconds and disappear automatically.
Components to use: Toaster

When to use: Use a modal notification when there is a sincere message that the user has to perceive.
Description: Modal notifications block the user by popping up above the regular screen. This way it is ensured, that the user perceives it.
Behaviour: The modal pop ups above the regular content, center aligned. It closes only on user interaction.
Components to use: Dialog

Do not notify users about information that is currently on screen (e.g. active chat conversations)
Do not notify users about technical operations that do not require user involvement (such as syncing)
Do not notify users about error messages that can be resolved without user action