Toaster message

Types

Depending on the type of message, there are 5 type of messages:

1. Information message
   Gives short additional informations about a topic within the page.
2. Success message
   Displayed to give a direct feedback to the user when ordering or activating something. This type of message is also used for a congratulations message, when the user’s action triggers something positive or additional than the initial request. Congratulation message offers a neat solution to trigger some surprise and delight.
3. Error message
   Prompted when user input is incorrect, forbidden, or the system fails to operate a task. The error message helps the user by giving him the feedback about what error he encountered.
4. Warning message
   Triggered when user executed a destructive action such as: deletion, non-reversible modification, etc. In this case, a good practice is to enable an action link to revert the destructive action.

Anatomy

1. Container
   The message itself is contained in a box. Since the toaster message needs to grab the user’s attention, we use a dark box on positive pages and a light box on negative pages. This contrasts nicely with the page’s background.
2. Icon
   The icon shows clearly which kind of message it is. The icon indicator is displayed in the indicator type color.
3. Title
   Title give the user the context about the message box, it should be short and descriptive, explaining the most important piece of information.
4. Short description (optional)
   Any complementary information to the title. This should be kept as short as possible, and displayed only if the title is not enough information.
5. Action link (optional)
   An optional action link is included to give users the option to act upon the message with a contextual icon, or close the message manually. More on this in the dismissing section.

Position

Dismissing a toast message

Unlike a message box, a toast message is never persistant.

1. By default, a toast message is automatically dismissed after a brief delay.
2. The action link can be turned into a close button, to give the user the option to manually dismiss the message.