Also known as:
ToastsSnackbarsPop-up notificationsDrawer notificationBannerConfirmationAcknowledgementMessageAlert

Toast Notification

A toast notification is a message object that presents timely information, including confirmation of actions, alerts, and errors.

Need to know

  • Use toast notifications immediately after a specific event such as a user action that does not relate to an object on the page.

Options

  • Modes:
    • Persistent
    • Dismissible
  • Auto-hide (auto-dismissing):
    • True/False
  • Auto-hide delay:
    • Short
    • Long

To keep in mind

When you are notifying a user of the outcome of an action they have taken, provide visual feedback with a Toast Notification.

  • It is used immediately after a specific event, such as a user action that does not relate to a specific object on the page. E.g. Confirmation of deleted items.
  • They appear a grid unit below the Title Block.
    • That is, the top edge of the toast notification is a grid unit lower than the bottom edge of the title block.
    • If you are scrolled down the page, the toast will still show.
  • Animation:
    • Enters from the top–right of the viewport (or top–left in right-to-left languages) and exits back to where it came from.
  • Multiple toasts can be shown at the same time, vertically stacked with a grid unit in between. The latest messages appears at the top.
  • System or user triggered:
    • System: e.g. an unexpected error occurs such as event commands failing in event sourced surveys
    • User-triggered: all other notifications.
  • Dismissible or persistent:
    • Use Persistent notifications when the information continues to be relevant after the task is complete, e.g. TODO needs an example
    • Use Dismissible notifications when the information has been acknowledged and the message is no longer relevant.
  • Anatomy:
    • Heading: summarizes the message (optimized for quick scanning). This relates directly to the message. Do not use generic language such as “Success”, “Error”, etc.
    • Description: succinct description that is a standalone sentence (that is, it does not run on from the heading).
    • Call to action (optional): hyperlinks can be included to provide the user with a clear call to action.
  • Why’s it called a toast?
    • Traditionally “toast” notifications in products have “popped up” from the bottom of the screen on mobile devices, like a slice of toast in a toaster. There are also “snackbars”!

When to use

  • When you are notifying a user of an action they have taken and need to provide visual feedback.

  • 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.

  • Positive

  • E.g. a notification about deleting successfully is positive because the user’s intended action was successful.

  • Informative

    • TODO: Add images and examples here
  • Cautionary

    • TODO: Add images and examples here

When not to use

  • When you are speaking directly to a piece of content, use Inline Notifications which can be positioned closer to it.
  • When a message applies at a system level or does not apply to a specific piece of content and it needs to alert all users, use Global Notifications.
  • When an action is user triggered and you need to inform the user, use a Confirmation Modal with relevant Mood, e.g. Informative Confirmation Modal

See also

  • 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.

  • Global Notification: A Global Notification is a message object used for system-level notifications that inform the user about system status such as logging in and background processes like data imports.

  • Confirmation Modal: The confirmation modal confirms the end result of an action such as Destructive / Irreversible actions / Affirmative actions.

External Links

Here are some examples of other existing design systems: