Notifications give users important information and status updates. This guide explains how to use them.
When using action buttons, make sure to always have one primary button and one secondary to indicate the hierarchy. Different colors can be used for the notifications, but please keep an eye on the contrast ratio and text color. For more information on contrasts and colors, please refer to the Accessibility Guidelines linked below.
Top-bar notifications span the whole screen width and contain a text message and an icon to close the message again. Top-bar notifications can be used as fixed element.
Toast notifications slide in from the top right and inform users by displaying text. They can be combined with an icon next to the message and action buttons if needed. Every toast notification contains an icon to close the message.
Snack-bar notifications are short messages that don’t use the full width of the screen. They work well on small screens, but can be used for desktop applications as well.
Bottom-bar notifications can be used for messages like privacy information and can contain buttons to interact with. Bottom-bar notifications are fixed elements.
Notification badges indicate unread messages or completion statuses in form fields. They can be used as informational elements in side or top-bar navigations or indicate the completion status of single form fields.