Ngorei NexaUI

<div class="nx-toast">
  <div class="toast-header">
    <strong>Notifikasi</strong>
    <button type="button" class="close-btn">×</button>
  </div>
  <div class="toast-body">
    Ini adalah pesan toast dasar
  </div>
</div>
        

<div class="nx-toast nx-toast-success">
  <div class="toast-body">
    Operasi berhasil dilakukan!
  </div>
</div>

<div class="nx-toast nx-toast-danger">
  <div class="toast-body">
    Terjadi kesalahan!
  </div>
</div>

<div class="nx-toast nx-toast-warning">
  <div class="toast-body">
    Peringatan: Tindakan ini tidak dapat dibatalkan
  </div>
</div>
        

<div class="toast-container top-right">
  <div class="nx-toast">
    <div class="toast-body">Toast di Kanan Atas</div>
  </div>
</div>

<div class="toast-container top-left">
  <div class="nx-toast">
    <div class="toast-body">Toast di Kiri Atas</div>
  </div>
</div>

<div class="toast-container bottom-left">
  <div class="nx-toast">
    <div class="toast-body">Toast di Kiri Bawah</div>
  </div>
</div>
        

<!-- Animation Fade -->
<button class="nx-btn nx-primary" onclick="showAnimatedToast('fadeToast')">Fade</button>
<div class="toast-container">
  <div class="nx-toast fade-animation" id="fadeToast">
    <div class="toast-body">Toast dengan Fade Animation</div>
  </div>
</div>

<!-- Animation Slide -->
<button class="nx-btn nx-primary" onclick="showAnimatedToast('slideToast')">Slide</button>
<div class="toast-container">
  <div class="nx-toast slide-animation" id="slideToast">
    <div class="toast-body">Toast dengan Fade Animation</div>
  </div>
</div>
            

<button class="nx-btn nx-primary" onclick="showProgressToast()">Show Progress Toast</button>

<div class="toast-container">
  <div class="nx-toast" id="progressToast">
    <div class="toast-body">
      Pesan dengan Progress Bar
      <div class="toast-progress"></div>
    </div>
  </div>
</div>
        

<button 
  class="nx-btn nx-primary" 
  onclick="showMultipleToasts()">
  Show Multiple Toast
</button>

<div class="nx-toast notifikasi-toast">
  <div class="toast-content">
    <div class="avatar">
      <img src="avatar.jpg" alt="User Avatar">
    </div>
    <div class="notification-content">
      <p class="notification-text">
        <strong>John Doe</strong> mengomentari postingan Anda
        <small class="notification-time">Baru saja</small>
      </p>
      <div class="notification-actions">
        <button class="nx-btn nx-sm nx-primary">Lihat</button>
        <button class="nx-btn nx-sm nx-light">Abaikan</button>
      </div>
    </div>
  </div>
</div>