Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Bootstrap docs

Considerations:

• Comment out the toasts initialization if you are not using them in _bootstrap.js

• Toasts will automatically hide if you do not specify autohide: false.

Usage

Example #1: Trigger the toasts

First create a button to trigger the toast:

{% include 'radix:button' with {
  color: 'primary',
  content: "Show live toast",
  id: 'liveToastBtn',
} %}

Then include your main toast:

{% include 'radix:toasts' with {
  with_wrapper: true,
  with_container: true,
  container_classes: 'position-fixed bottom-0 end-0 p-3',
  toasts: [
    {
      header: {
        title: 'Radix Toast Title',
        subtitle: '11 mins ago',
        classes: 'text-primary bg-light'
      },
      body: 'This is the first toast message.',
      role: 'alert',
      autohide: false,
      with_body_wrapper: false,
      with_close: true,
      delay: 10000,
      attributes: {
        'class': ['extra-toast-class'],
        'id': 'liveToast'
      },
      additional_buttons: [
        {
          text: 'Action 1',
          color: 'secondary',
          outline: true,
          button_utility_classes: ['me-2'],
        },
        {
          text: 'Action 2',
          color: 'success',
          outline: false,
          button_utility_classes: ['me-2'],
        }
      ]
    }
  ],
} %}

Then you should also trigger the toasts with JS like so (Already in _toast-init.js but commented out):

import { Toast } from "./_bootstrap";

(() => {
  const toastTrigger = document.getElementById('liveToastBtn');
  const toastLiveExample = document.getElementById('liveToast');
  
  if (toastTrigger) {
    const toastBootstrap = Toast.getOrCreateInstance(toastLiveExample);
    toastTrigger.addEventListener('click', () => {
      toastBootstrap.show();
    });
  }
})();

Example #2: Run toasts on page load

For running the toasts on page load, you just need to change the JS approach (Already in _toast-init.js):

(() => {
  document.addEventListener("DOMContentLoaded", () => {
    const toastElList = [...document.querySelectorAll(".toast")];
    for (const toastEl of toastElList) {
      const toast = new Toast(toastEl);
      toast.show();
    }
  });
})();