Notifications
A notification is a message object that presents timely information, including alerts, errors, reminders, cookie warnings, and requests.
Comparing components
Global notification: A global notification is always at the top of the screen and stretches the full width of the viewport. It is used for system-level notifications that inform the user about system status such as logging in and background processes like data imports.
Inline notification: Inline notifications appear within content areas as close as possible to the thing that it’s about. It is used for contextual information.
Toast notification: Toasts appear in the top–right (or top–left in right-to-left languages). It is used immediately after a specific event such as a user action that does not relate to an object on the page. For example, confirmation of deleted items.
When to use:
- For system based notifications, e.g. The server is down, use Global Notifications
- For notifications which are relevant to a piece of content on the page, use Inline Notifications
- For notifications which are temporary and need to provide visual feedback, use Toast Notifications