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 and an dismiss button 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

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>