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.

Well done! You successfully done this.
Heads up! This needs your attention.
Warning! Better check yourself.
Oh snap! Change a few things and submitting again. 
				
<!-- Toasts - .toast -->
<div class="toast toast-success" role="alert">
   <strong>Well done!</strong> You successfully read this important alert message.
</div>

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

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

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