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.
A small message that shows up in a box at the bottom of the screen and might disappear on its own after few seconds.
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.
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.
There are four types of toast notifications:
Examples of use:
Place it in the bottom right corner, unless your interface has another clear placement for it.
The four types of toast notifications are used for four different types of short 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:
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?
Success notifications may consist of:
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:
Critical and error notifications should be used for short information about errors or when something goes wrong.
Critical and error notifications may consist of:
Don’t start each word in headings and labels with upper case. Only use upper case in:
To make the icons clear on coloured backgrounds, use "solid" FontAwesome icons: