Overview

Toasts display low priority, event-driven feedback which usually doesn’t require any user interaction. They appear for a set time and disappear automatically. They are appropriate for informing the user about action confirmations without being intrusive or infer unnecessary attention (e.g. “Message Sent” or “Changes Saved”).

Usage

Use when

  • Notifying the user of global information, such as a change in server connection status.
  • Confirming the success of a global action.
  • Displaying quick snippets of information that disappear on their own after a set amount of time has passed.
Example
menu App Title
  • Email 1
  • Email 2
  • Email 3
  • Email 4
  • Email 5
  • Toasts notify the user of global actions, such as deleting a set of emails, and can offer the user a chance to undo that action in case of user error.

    Don’t use when

    • Displaying critical information that require immediate user action. Instead, use an alert
    • The information being displayed is highly contextual to the user action.

    Specifications

    • Container (Height: 42px; Radius: 2px; Padding: 16px; Margin: 16px; solid color; no border; level 3 shadow ) required
    • Toast text (Font: Open Sans Semibold 14px) required
    • Leading non-interactive icon (16x16px) optional
    • Trailing close icon (16x16px) or a Text Only Button optional

    Toasts

    • Appear on the bottom, relative to the bottom edge of the browser/ device.
    • Fill as much horizontal space as needed.
    • Float above the content.
    • Fade out automatically after some some.
    • Can sometimes be dismissed with a close icon.
    • Cannot include links.

    Basic Toasts

    Behaviors

    • When applicable, dismiss by clicking the close icon.
    • Toasts fade out automatically after 30 seconds.

    Editorial

    • Keep titles three to five words if possible.
    • For titles, use title case and capitalize prepositions of four letters or more.
    • Messages should tell the user what’s happening in friendly, non-technical language.
    • If the message requires a user to take action in order to continue or successfully complete a task, use an alert instead.
    • For messages, use full sentences with punctuation. Use sentence case.

    Accessibility

    • Include the role="alert" attribute.
    • Toasts should not be visually hidden if they are not being used. If you do not want a screen reader to pick up a toast, use the aria-hidden='true' HTML attribute and/or {display: none;} in your CSS.
    • When constructing a toast message, consider how it will be read by a screen reader:
      • Write out dates, e.g., December 1, 2018 and not 12/1/2018.
      • Avoid non-text symbols like “/” and “+”.
      • When describing a date or time range use “to” instead of “–”.
    • Toasts should be used sparingly and only in instances that warrant removing the user from their current task. Too many toasts can be disorienting to users with cognitive issues.
    What's Changed
    Date Version Notes Contributors
    11/23/2020 1.0.0 Background colors changed to be accessible. E. Bohn, L. Kause, N. Springer