Toast

Allows you to convey quick messaging notifications to the user. E.g When an action is completed, a success toast notification can be displayed and dismissed by the user or dismissed after a set amount of time has passed. Alternatively, a CTA can be used with the toast to allow the user to proceed with next steps or try again

Example

Default toast

Title
This is a toast message

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

                

Variants

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

                

Complex toast

Launch Failed
Request limit exceeded.

 
<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

Toast 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

Toast Spacing

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

Usage guidelines

Toasts should be used:

  • When you want to present quick snippets of information to users. Such as when users have submitted a form sucessfully or when a system error occurs.

Toasts should not be used:

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

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;
Home


Previous version 2.0.0