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"><span>Hello, world! This is a toast message.</span></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.

<div class="toast-container top-0 end-0 position-absolute">
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header"><strong class="me-auto">Notification</strong><button type="button" class="btn-close"
        data-boodoo-dismiss="toast" aria-label="Close"></button></div>
    <div class="toast-body"><span>Some quick example text to build on the toast.</span></div>
  </div>
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header"><strong class="me-auto">Second toast</strong><button type="button" class="btn-close"
        data-boodoo-dismiss="toast" aria-label="Close"></button></div>
    <div class="toast-body"><span>See, another stacked toast.</span></div>
  </div>
</div>

Color variants

Primary toast

Success toast

Danger toast

<div class="toast toast-primary show mb-2" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body"><span>Primary toast</span></div>
</div>
<div class="toast toast-success show mb-2" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body"><span>Success toast</span></div>
</div>
<div class="toast toast-danger show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body"><span>Danger toast</span></div>
</div>

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 with automatic stacking:
boodoo.toast.success('Settings saved successfully!');
boodoo.toast.danger('Could not connect to server.');
boodoo.toast.info('New version 1.0.3 is now ready.');

<div class="d-flex flex-wrap gap-2">
  <button class="btn btn-primary" id="toastProgBtn" type="button"><span>Show Default Toast</span></button>
  <button class="btn btn-success" id="toastSuccessBtn" type="button"><span>Success Toast</span></button>
  <button class="btn btn-danger" id="toastDangerBtn" type="button"><span>Danger Toast</span></button>
  <button class="btn btn-info text-white" id="toastInfoBtn" type="button"><span>Info Toast</span></button>
</div>
<script>
  document.getElementById('toastProgBtn').addEventListener('click', function () {
    boodoo.toast('Hello from boodoo! This toast was created with one line of JS.', { title: 'Notification' });
  });
  document.getElementById('toastSuccessBtn').addEventListener('click', function () {
    boodoo.toast.success('Project deployed successfully to edge CDN!');
  });
  document.getElementById('toastDangerBtn').addEventListener('click', function () {
    boodoo.toast.danger('Failed to sync authentication token.');
  });
  document.getElementById('toastInfoBtn').addEventListener('click', function () {
    boodoo.toast.info('A new background worker update is active.');
  });
</script>

Smart Toast Progress Bar & Auto-Dismiss

boodoo toasts feature smooth CSS countdown progress bars that visually indicate remaining display duration before auto-dismissal:

Auto-dismissing notification with visual countdown indicator.

<div class="toast show" role="alert">
  <div class="toast-header">
    <strong class="me-auto"><span>System Alert</span></strong>
    <button type="button" class="btn-close" data-boodoo-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body"><span>Message content</span></div>
  <div class="toast-progress"></div>
</div>