<button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    onclick="$notification({text:'This is a simple notification'})"
  >
    Default
  </button>
                
              

                
  <button
    class="btn bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
    onclick="$notification({text:'This is a simple notification',variant:'primary'})"
  >
    Primary
  </button>
  <button
    class="btn bg-secondary font-medium text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
    onclick="$notification({text:'This is a simple notification',variant:'secondary'})"
  >
    Secondary
  </button>
  <button
    class="btn bg-info font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
    onclick="$notification({text:'This is a simple notification',variant:'info'})"
  >
    Info
  </button>
  <button
    class="btn bg-success font-medium text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90"
    onclick="$notification({text:'This is a simple notification',variant:'success'})"
  >
    Success
  </button>
  <button
    class="btn bg-warning font-medium text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90"
    onclick="$notification({text:'This is a simple notification',variant:'warning'})"
  >
    Warning
  </button>
  <button
    class="btn bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
    onclick="$notification({text:'This is a simple notification',variant:'error'})"
  >
    Error
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80"
    onclick="$notification({text:'This is a simple notification',variant:'light'})"
  >
    Light
  </button>
  <button
    class="btn bg-navy-500 font-medium text-slate-200 hover:bg-navy-450 focus:bg-navy-450 active:bg-navy-450/90"
    onclick="$notification({text:'This is a simple notification',variant:'dark'})"
  >
    Dark
  </button>
                
              

                
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    onclick="$notification({text:'This is a left top notification',variant:'info',position:'left-top'})"
  >
    Left Top
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    onclick="$notification({text:'This is a left bottom notification',variant:'info',position:'left-bottom'})"
  >
    Left Bottom
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    onclick="$notification({text:'This is a center top notification',variant:'info',position:'center-top'})"
  >
    Center Top
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    onclick="$notification({text:'This is a center bottom notification',variant:'info',position:'center-bottom'})"
  >
    Center Bottom
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    onclick="$notification({text:'This is a right top notification',variant:'info',position:'right-top'})"
  >
    Right Top
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    onclick="$notification({text:'This is a right bottom notification',variant:'info',position:'right-bottom'})"
  >
    Right Bottom
  </button>
                
              

                
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    onclick="$notification({text:'This is a simple notification',variant:'info',duration:3000})"
  >
    3 Seconds
  </button>
                
              

                
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    onclick="$notification({content:'#custom-html-notif',duration:3000})"
  >
    HTML content
  </button>
  <template id="custom-html-notif">
    <div
      class="flex max-w-xs overflow-hidden rounded-lg bg-navy-600 font-normal"
    >
      <div class="flex items-start p-4">
        <div class="avatar size-10">
          <img
            class="rounded-full"
            src="images/avatar/avatar-10.jpg"
            alt="avatar"
          />
          <div
            class="absolute right-0 size-3 rounded-full border-2 border-navy-600 bg-primary dark:bg-accent"
          ></div>
        </div>
      </div>
      <div class="p-2">
        <div class="flex items-center justify-between space-x-2">
          <h5
            class="font-medium tracking-wide text-navy-100 line-clamp-1 lg:text-base"
          >
            Message Header
          </h5>
          <button
            data-notification-remove
            class="btn size-7 rounded-full p-0 text-white hover:bg-white/20 focus:bg-white/20 active:bg-white/25"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="size-4"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
        <p class="text-navy-100">Lorem ipsum dolor sit amet, consectetur</p>
        <div class="flex justify-end px-3 py-1">
          <a href="#" class="uppercase text-accent-light hover:underline"
            >show</a
          >
        </div>
      </div>
    </div>
  </template>