Toast

Example

<div class="sgds toast show ">
  <div class="toast-header">
      <i class="bi bi-check-circle me-2"></i>
    <strong class="me-auto">Title</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    This is a toast message
  </div>
</div>

<div>
    <div class="sgds toast show is-warning mb-2" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
          <i class="bi bi-exclamation-triangle me-2"></i>
        <strong class="me-auto">Warning</strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        This is a warning message
      </div>
    </div>
    <div class="sgds toast show is-success mb-2" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <i class="bi bi-check-circle me-2"></i>
        <strong class="me-auto">Success</strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
          This is a success message
      </div>
    </div>
    <div class="sgds toast show is-danger" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <i class="bi bi-exclamation-circle me-2"></i>
        <strong class="me-auto">Danger</strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
          This is a error message
      </div>
    </div>
</div>

<div class="sgds toast show is-danger">
  <div class="toast-header">
      <i class="bi bi-exclamation-circle me-2"></i>
    <strong class="me-auto">Launch Failed</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Request limit exceeded.<br />
    <button class="btn btn-sm btn-outline-dark">Try again</button>
  </div>
</div>

Anatomy

1. Icon (situational): Used as a supporting element for the notification, giving more context to the nature of the notification.
2. Title: Name of the toast letting users know what the toast is about.
3. Close icon (situational): Used when you are not using time-based toasts. This allows users to manually dismiss the toast
4. CTA (situational): Used to allow users to carry out actions immediately upon completion of a task.

Spacing

Within the toast
Ensure that there is a min of 16px spacing within the toast notification and 16px spacing between content and CTA.

Usage guidelines

Best practices:

1. Titles should not stretch beyond two lines.
2. Avoid technical jargon.

Toasts should be used when:

1. You want to present quick snippets of information to users. Such as when users have submitted a form successfully or when a system error occurs.
2. Showing non-critical messages that do not require immediate user action and interaction.

Toasts should not be used when:

1. Conveying important alerts. E.g If your system is going down for maintenance.

Usability guidelines

Don't stack the notifications
Avoid stacking multiple toasts together as this will cause confusion for users. If stacking cannot be avoided, ensure that the toasts are of a similar nature. E.g Error messaging.

Make sure they are small and unobtrusive
This is so that content is not blocked and is part of the users natural task flow

Make toasts as brief as possible
Toasts convey quick snippets of information and therefore should not contain more than 2-3 lines of text. The content should make sense with as little words as possible. E.g Message sent vs Your message has been sent.

Accessibility guidelines

Aria attributes

1. Use role="alert" to define a live region and force screen readers to announce the content of the toast.
2. Setting role="alert" is equivalent to setting aria-live="assertive" and aria-atomic="true".

Focus indicator

1. When a toast notification appears, ensure it does not automatically steal focus from the current task. Instead, use ARIA live regions to announce the toast content.
2. If interaction is required (e.g., buttons within the toast), provide a mechanism for users to move focus to the toast using the keyboard.
3. If a toast notification requires user interaction (like dismissing or performing an action), use focus trapping to keep the keyboard focus within the toast until the interaction is complete.

Toast design tokens

$toast-max-width: 350px !default;
$toast-padding-x: .75rem !default;
$toast-padding-y: .5rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !default;
$toast-background-color: rgba($white, .85) !default;
$toast-border-width: 1px !default;
$toast-border-color: rgba($black, .1) !default;
$toast-border-radius: $border-radius !default;
$toast-box-shadow: $box-shadow !default;
$toast-spacing: $container-padding-x !default;
$toast-header-color: $gray-600 !default;
$toast-header-background-color: rgba($white, .85) !default;
$toast-header-border-color: rgba($black, .05) !default;