Components
Components / molecules
Notifications tell people what happened. A panel stays in the page until it is dealt with, and a toast appears briefly and goes away.
Usage
Use a panel for messages people must not miss, such as a form error summary, and a toast for short confirmations that need no action. Pair an error toast with an error panel in the page, because a toast can disappear before it is read.
02 / examples
Variant 01
Four statuses. Try the close button.
View content
Applications close on Friday
Application sent
Your session ends in 5 minutes
We could not send your application
Variant 02
Shows for six seconds, then goes away. Press a button to see one.
View content
03 / contract
A notification panel stays in the page until the problem is dealt with, and a toast appears briefly and goes away by itself. The panel has four statuses, info, success, warning and error, and the toast has three, success, error and warning. Each shows an icon and a title so that the status is understood without relying on colour.
Both can show a close button when it makes sense to dismiss them. A toast also takes a duration and stops counting down while it is hovered or focused. An error toast should be paired with an error panel in the page, because a toast can disappear before it is read.
04 / accessibility
Errors and warnings are announced to assistive technology as alerts, and information and success messages are announced politely as status updates, so that people using a screen reader hear them without their focus being moved. The close button is a 44px icon button with a clear label.
The timer on a toast is decorative: when reduced motion is turned on it does not animate, and the toast still goes away on time. A toast never takes focus, and a message that people must act on should be shown in a panel instead.