Toast

Show toast notifications with ot.toast(message, options?).

<button onclick="ot.toast('Action completed successfully', 'All good', { variant: 'success' })">Success</button>
<button onclick="ot.toast('Something went wrong', 'Oops', { variant: 'danger', placement: 'top-left' })" class="danger">Danger</button>
<button onclick="ot.toast('Please review this warning', 'Warning', { variant: 'warning', placement: 'bottom-right' })" class="outline">Warning</button>
<button onclick="ot.toast('New notification', 'For your attenton', { placement: 'top-center' })">Info</button>

Placement

ot.toast('Top left', '', { placement: 'top-left' })
ot.toast('Top center', '',{ placement: 'top-center' })
ot.toast('Top right', '',{ placement: 'top-right' })  // default
ot.toast('Bottom left', '', { placement: 'bottom-left' })
ot.toast('Bottom center', '', { placement: 'bottom-center' })
ot.toast('Bottom right', '',{ placement: 'bottom-right' })

Options

Custom markup

Use ot.toastEl(element, options?) to show toasts with custom HTML content.

<template id="undo-toast">
  <output class="toast" data-variant="success">
    <h6 class="toast-title">Changes saved</h6>
    <p>Your document has been updated.</p>
    <button class="secondary small" onclick="this.closest('.toast').remove()">Okay</button>
  </output>
</template>

<button onclick="ot.toastEl(document.querySelector('#undo-toast'), { duration: 8000 })">
  Toast with action
</button>

From a template:

ot.toastEl(document.querySelector('#my-template'))
ot.toastEl(document.querySelector('#my-template'), { duration: 8000, placement: 'bottom-center' })

Dynamic element:

const el = document.createElement('output');
el.className = 'toast';
el.setAttribute('data-variant', 'warning');
el.innerHTML = '<h6 class="toast-title">Warning</h6><p>Custom content here</p>';
ot.toastEl(el);

The element is cloned before display, so templates can be reused.

Clearing toasts

ot.toast.clear()              // Clear all
ot.toast.clear('top-right')   // Clear specific placement