Toasts

A toast is a modeless, unobtrusive message used to display a brief, auto-expiring notification to the user.

This transient message appears and fades into the background automatically after a short while, e.g. informing the user that a command has been executed properly. (The name toast is because it is like a friend lifting and lowering his glass towards you non-intrusively thus assuring you that all is well.) Read more about toasts in the UX Guidelines.

Wrap any text in .toast for basic toast messages.

Use when

• The user needs nonintrusive feedback about an action performed
• The message is by nature short lived and just positive affirmation and not intended for deep scrutiny
• Information may need to be shown across several services, e.g. for Visma.net as such
• Toast starts fading into the background after 2500 ms and is gone after 5000 ms.

Design

Options

There are 4 options for toasts and to apply them simply add one of the following classes: .toast-success, .toast-info, .toast-warning or .toast-danger.

By default we set position absolute on toasts, they are horizontally centered and the top value is set to 40px/4rem. You can change the position or the left/top/right/bottom value using helper classes.

					
Copy to clipboard
<div class="toast toast-success" role="alert">
   <strong>Well done!</strong> You successfully read this important alert message.
</div>

Copy to clipboard
<div class="toast toast-info" role="alert">
   <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>

Copy to clipboard
<div class="toast toast-warning" role="alert">
   <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Copy to clipboard
<div class="toast toast-danger" role="alert">
   <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

Animation

The message is by nature short lived and just positive affirmation and not intended for deep scrutiny, and most important, should not have any type of action insiede it (close button, links or action buttons). We recommend that the toast should start fading into the background after 2500 ms and is gone after 5000 ms.

In the example below we set the toast to be displayed in the top right corner of our viewport (example box).

					
Copy to clipboard
<button type="button" id="btn-test-toast" class="btn btn-primary btn-lg">Click me to display a toast!</button>

<div id="test-toast" class="toast toast-success hide position-absolute top-8 right-8 left-auto" role="alert">
   <strong>Well done!</strong> You successfully read this important alert message.
</div>

<!-- Small script we used for our demo -->
Copy to clipboard
<script>
   $(#btn-test-toast).on('click', function() {
      $(#test-toast).fadeIn('slow').delay(2500).fadeOut(5000);
   });
</script>