Toasts

Push notifications to your visitors with the toast component — lightweight, easily customizable alert messages.

Overview

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They're built with flexbox, so they're easy to align and position — by default they auto-hide after 5 seconds (data-boodoo-autohide="true" / data-boodoo-delay="5000").

Basic example

Hello, world! This is a toast message.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">boodoo</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-boodoo-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Hello, world! This is a toast message.</div>
</div>

Stacking / container

Place toasts inside a .toast-container (positioned via the top-*/end-*/bottom-* utilities) to stack notifications in a corner or edge.

Some quick example text to build on the toast.

See, another stacked toast.

Color variants

Primary toast

Success toast

Danger toast

JavaScript behavior

// Show all toasts in a container
boodoo.Toast.showAll(document.getElementById('toastContainer'));

// Show a single toast
const t = boodoo.Toast.getOrCreateInstance(document.getElementById('myToast'), { autohide: true, delay: 3000 });
t.show();

// Or the quick helper:
boodoo.toast('Saved successfully!', { title: 'Success', delay: 4000 });