Toast
A toast notification is a lightweight popup message that appears temporarily over the main interface to provide brief feedback, notifications, or error message to the user.
Example
Default toast
<div class="cgds 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="cgds 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="cgds 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="cgds 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 an error message
</div>
</div>
</div>
Complex toast
<div class="cgds 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: 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: Used when you are not using time-based toasts. This allows users to manually dismiss the toast
- CTA: 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 successfully 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;