Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Toast notifications

A small message that shows up in a box at the bottom of the screen and might disappear on its own after few seconds.

Guidelines

Short description

Use a toast notification when you have short feedback messages, based on user actions to communicate. They are small and a little discrete, so make sure to use them with care.

Behaviour

A toast notification slides up like a real-life piece of bread from the toaster. Some toasts have a timeout line in the bottom, which means that they will disappear (slide down) after a pre-defined amount of time. When the user hovers over such a toast, the timeout will pause. All toasts also have a close button.

Types of toast notifications

There are four types of toast notifications:

  1. Information: Grey (light grey or dark grey, depending on the background). Content that holds neutral information that we want to inform about.
  2. Success: Green. Should be used as a response to an action or something that is considered to be positive or a success.
  3. Warning: Yellow. Not an error but important information for a user to consider, or be aware of.
  4. Critical or error: Red. Used for errors or when something goes wrong.

When and how to use it

Examples of use:

  • When the user feedback does not have a specified placement in the interface.
  • When the user action dissolves a page, slide out or similar, in which the user performed the action.
  • When the interaction takes the user to a new page, on which it is still necessary to convey feedback about the outcome of the action.
  • Warnings or hints on something the user does or is about to do.
  • Confirmations about smaller actions or new settings.
  • Hints or questions to the user, for example "Do you want to give us feedback on this service?"
  • As a notification method within the shell itself rather than a page specific feedback.
  • Most often, it is preferable to let the user close to toast themselves but in some cases, such as a short positive feedback message (like "Done!") it can be dissolved by itself after a few seconds.

Placement

Place it in the bottom right corner, unless your interface has another clear placement for it.

Do's and don'ts

  • Be specific and short in the actual message
  • Add an icon to enforce the message (optional)
  • Design it in relation to your grid size

 

  • Don't write too much text in it
  • Don't use time-outs in critical messages

Specification

Measurements

  • Min. height: 3 rem
  • Min. width: 22 rem

Icons

To make the icons clear on coloured backgrounds, use "solid" FontAwesome icons:

  • Information – "info-square"
  • Success – "check"
  • Warning – "exclamation-square"
  • Error – "exclamation-square“

States

Shadow

  • Box-shadow: 0px 2px 6px rgba (0, 0, 0, 0.15)

Information

Toast on white background

  • Toast: Grey 200
  • Text: Grey 800

Toast on dark background

  • Toast: Grey 800
  • Text: White 

Success

  • Toast: Dark green 2
  • Text: White

Warning

  • Toast: Yellow
  • Text: Grey 800

Critical information and error

  • Toast: Dark red 1
  • Text: White

Colours

  • Grey 200
  • Grey 800
  • White 
  • Dark green 2
  • Yellow
  • Dark red 1

Copy

The four types of toast notifications are used for four different types of short information:

  • Information; information in general.
  • Success; confirmations.
  • Warnings; important information to be aware of.
  • Critical and error; what the customer needs to do to be able to proceed.

Information

Information notifications may be used to hint or to ask customers to do something voluntary, for instance, to give us feedback on a service.

Information notifications may consist of:

  • Information. Short hint, tip or voluntary request. The text does not have to start with the text Information.
  • Instruction. Next step, for instance, a button, x or link.

Success

Success notifications should be used for confirmations about smaller actions or new settings. For instance, The money has successfully been transferred, Done! or Thank you! Your information is saved.

Why should we confirm?

  • People expect digital interfaces to behave according to social norms.
  • Confirmations are among the most important feedbacks that people expect to receive.

Success notifications may consist of:

  • Information. Short confirmation that the action was done as intended.
  • Instruction. Next step (might be a button, x or link).

Warning

Warning notifications should be used to inform the customers to consider or be aware of something they are about to do.

Warning notifications may consist of:

  • Explanation. Short information of the problem and how long the problem will persist (if you know). The message should normally not start with words like Important, Note or Warning.
  • Instruction. Next step (might be a button, x or link).

Critical and error

Critical and error notifications should be used for short information about errors or when something goes wrong.

Critical and error notifications may consist of:

  • Explanation or instruction. Short helping text explaining what the customers need to know or do to be able to proceed with what they intended – now or later. The message should normally not start with the text Error.
  • Next step (might be a button, x or link).

Related patterns & components

Page last updated

Feedback

Was this helpful?