<bs-toast> element

Light

  openToast('Hello, world!', { color: 'dark', bgColor: 'light', delay: 5000 })

Show

Success

  openToast('Hello, world!', { color: 'dark', bgColor: 'success', delay: 5000, opacity: 25 })

Show

Danger

  openToast('Error!', { bgColor: 'danger', delay: 20000 })

Show

Position

  openToast('Hello, world!', { color: 'white', bgColor: 'dark', delay: 1500, position: 'bottom-center' })

Show

Custom content

  const content = document.createElement('div')
  content.innerHTML = `
    <div class="hstack align-items-start gap-2">
      <img class="rounded-pill" src="https://placehold.jp/40/3d4070/ffffff/150x150.png?text=John" style="width: 32px; height: 32px;">
      <div class="vstack gap-2">
        <strong>John</strong>
        <div class="text-muted">
          Hello, world! This is a toast message.
          Hello, world! This is a toast message.
          Hello, world! This is a toast message.
        </div>
        <div class="hstack gap-2">
          <button type="button" class="btn btn-sm btn-primary">Accept</button>
          <button type="button" class="btn btn-sm btn-outline-secondary">Decline</button>
      </div>
    </div>
  `
  const hide = openToast(content, { color: 'dark', bgColor: 'light', delay: 20000, hideCloseButton: true })
  content.addEventListener('click', (event) => {
    if (event.target.matches('button')) {
      hide()
    }
  })

Show