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
<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
<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
- Icon (situational): Used as a supporting element for the notification, giving more context to the nature of the notification.
- Title: Name of the toast letting users know what the toast is about.
- Close icon (situational): Used when you are not using time-based toasts. This allows users to manually dismiss the toast
- 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 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;Last updated 22 November 2023
