Toast

Hi!

I've prepared an example based on our Toast documentation that answers your questions: To initialize a Toast component that sticks to the bottom center of the screen, you can use this HTML structure:

<div
  class="pointer-events-auto mx-auto hidden w-96 rounded-lg bg-primary-100 bg-clip-padding text-sm text-primary-700 shadow-lg dark:bg-slate-900 dark:text-primary-500"
  id="placement-example"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
>
  <div
    class="flex items-center justify-between rounded-t-lg border-b-2 border-[#b1c6ea] bg-clip-padding px-4 py-[0.65rem] dark:border-[#234479]"
  >
    <div class="flex items-center">
      <span class="me-2 py-1 [&>svg]:h-6 [&>svg]:w-6">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
        >
          <path
            fill-rule="evenodd"
            d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
            clip-rule="evenodd"
          />
        </svg>
      </span>
      <p class="font-bold">TW Elements</p>
    </div>
    <div class="flex items-center">
      <p class="text-xs">11 mins ago</p>
      <button
        type="button"
        class="-me-[0.375rem] ms-3 box-content rounded-none border-none p-[0.25em] text-black opacity-50 hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
        data-twe-toast-dismiss
        aria-label="Close"
      >
        <span
          class="disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&>svg]:h-6 [&>svg]:w-6"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18 18 6M6 6l12 12"
            />
          </svg>
        </span>
      </button>
    </div>
  </div>
  <div class="break-words rounded-b-lg p-4 text-center">
    Hello, world! This is a toast message.
  </div>
</div>

Then initialize it using either ES modules or UMD approach:

Using ES:

import { Toast } from "tw-elements";
const toastElement = document.getElementById("placement-example");
const toastInstance = Toast.getOrCreateInstance(toastElement, {
  position: "bottom-center", // This will position the toast at bottom center
});

toastInstance.show();

Using UMD:

const toastElement = document.getElementById("placement-example");
const toastInstance = twe.Toast.getOrCreateInstance(toastElement, {
  position: "bottom-center", // This will position the toast at bottom center
});

toastInstance.show();

Regarding events, you can listen to Toast events like this:

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.twe.toast', () => {
  // do something...
});

You can find the complete list of Toast events in our Toast API documentation section.