Toasts

Best Practices

• Put Toasts at the top right of the screen.
• Toasts use the same Status Colors as Alerts.
• Status Colors only add visual cues. The content of the Toast must make the meaning obvious to assistive technology users.
• Toasts are only triggered by user actions such as saving, editing, deleting, or creating a file.
• Use Info (Blue) to communicate informative or helpful information to users.
• Use Success (Green) to provide feedback to the user indicating an action is successful.
• Use Warning (Yellow) to indicate an unintended, but not dangerous, effect.
• Use Danger (Red) to indicate an action will cause data loss, error, or other hard-to-reverse effects.
• Use the icons provided for each Toast type.
• Toasts may also be used to notify the user about information related to their current action.
• Toasts are persistent regardless of scrolling.
• Toasts are dismissable either by clicking the X to close or they automatically close after a defined time duration (suggestion is 7 seconds).

When writing Toasts, keep the following in mind:

• Be clear and specific.
• Use Plain Language, not technical jargon.
• Do not blame the user.
• Avoid negative language.
• Avoid using all uppercase letters unless you are using Acronyms.
• Provide useful information.
• See Voice and Tone for more information.

Usage

Success Toast

<div class="toast toast-success show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <span class="fas fa-info-circle" aria-hidden="true"></span>
    <strong class="mx-1">Hey!</strong> Hey, User, the thing worked!
    <button type="button" class="ml-auto mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

Danger Toast

<div class="toast toast-danger show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <span class="fas fa-exclamation-triangle" aria-hidden="true"></span>
    <strong class="mx-1">Danger!</strong> Hey, User, the thing broke.
    <button type="button" class="ml-auto mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

Info Toast

<div class="toast toast-info show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <span class="fas fa-info-circle" aria-hidden="true"></span>
    <strong class="mx-1">Hey!</strong> Hey, User, just an FYI.
    <button type="button" class="ml-auto mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

Resources

• Bootstrap Documentation - Toasts