Demo

Basic
toast('Event has been created.')

toast('<strong>Success!</strong> Event has been created')
Header
toast({
  header: 'Success',
  body: 'Event has been created',
})

toast({
  header: {
    icon: '<svg width="1.5em" height="1.5em" class="text-success me-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
    title: 'Success',
    ago: '11 mins ago',
    closeBtn: true,
  },
  body: 'Event has been created',
})

toast({
  header: '<strong class="me-auto">Event has been created</strong><button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="toast">Close</button>',
  body: 'Monday, January 3rd at 6:00pm',
})
Placement
toast({
  body: 'Event has been created',
  placement: 'top-left',
})

toast({
  body: 'Event has been created',
  placement: 'bottom-left',
})

toast({
  body: 'Event has been created',
  placement: 'bottom-right',
})
Option
toast({
  body: 'Event has been created',
  animation: false,
})

toast({
  header: {
    title: 'Success',
    closeBtn: true,
  },
  body: 'Event has been created',
  autohide: false,
})

toast({
  body: 'Event has been created',
  delay: 1000,
})

toast({
  body: 'Event has been created',
  gap: 64,
  delay: 1000,
})

toast({
  body: 'Event has been created',
  margin: '5rem',
  delay: 1000,
})
Color schemes
toast({
  classes: `text-bg-primary border-0`,
  body: `
  <div class="d-flex w-100" data-bs-theme="dark">
    <div class="flex-grow-1">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close flex-shrink-0" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>`,
})

toast({
  classes: `text-bg-secondary border-0`,
  body: `
  <div class="d-flex w-100" data-bs-theme="dark">
    <div class="flex-grow-1">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close flex-shrink-0" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>`,
})

toast({
  classes: `text-bg-success border-0`,
  body: `
  <div class="d-flex w-100" data-bs-theme="dark">
    <div class="flex-grow-1">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close flex-shrink-0" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>`,
})

toast({
  classes: `text-bg-danger border-0`,
  body: `
  <div class="d-flex w-100" data-bs-theme="dark">
    <div class="flex-grow-1">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close flex-shrink-0" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>`,
})

toast({
  classes: `text-bg-warning border-0`,
  body: `
  <div class="d-flex w-100">
    <div class="flex-grow-1">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close flex-shrink-0" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>`,
})

toast({
  classes: `text-bg-info border-0`,
  body: `
  <div class="d-flex w-100">
    <div class="flex-grow-1">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close flex-shrink-0" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>`,
})

toast({
  classes: `text-bg-dark border-0`,
  body: `
  <div class="d-flex w-100" data-bs-theme="dark">
    <div class="flex-grow-1">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close flex-shrink-0" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>`,
})

toast({
  classes: `text-bg-light border-0`,
  body: `
  <div class="d-flex w-100">
    <div class="flex-grow-1">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close flex-shrink-0" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>`,
})
Methods
const example = toast({
  body: 'Event has been created',
  autohide: false,
})

setTimeout(() => {
  example.hide()
}, 1000)

toast.hide()