<section class="demo-section">
  <h2>Toasts</h2>

  <div class="demo-row">
    <button class="btn btn-sm btn-primary" type="button" onclick="VMKUIKit.Toasts.createInfo('Info', 'This is an info toast.', { lifetime: 4000 }).show()">
      Info toast
    </button>
    <button class="btn btn-sm btn-success" type="button" onclick="VMKUIKit.Toasts.createSuccess('Success', 'Operation completed.', { lifetime: 4000 }).show()">
      Success toast
    </button>
    <button class="btn btn-sm btn-warning" type="button" onclick="VMKUIKit.Toasts.createWarning('Warning', 'Please review your settings.', { lifetime: 4000 }).show()">
      Warning toast
    </button>
    <button class="btn btn-sm btn-danger" type="button" onclick="VMKUIKit.Toasts.createError('Error', 'Something went wrong.', { lifetime: 4000 }).show()">
      Error toast
    </button>
  </div>
</section>