Toasts

The framework comes with a few basic 'toast' styles add this dynamically to the end of your markup.

Scheduled catch up
Friday, February 10, 2010
 
<div class="row">
      <div class="col">
         <div class="form-group">
            <button class="btn btn-white" @click="showToast">Add to calendar</button>
         </div>
      </div>
   </div>
   <div class="toasts">
      <toast ref="toast">
         <div class="p-4">
            <div class="text-black">Scheduled catch up</div>
            <div class="text-muted small">Friday, February 10, 2010</div>
         </div>
      </toast>
</div>

Then with the click handler, add a method to your vue script

showToast() {
      this.$refs.toast.showToast(3000);
}

Note this requires javascript (Vuejs 2.0)