Tailwind CSS Alert - Nuanxa

Komponen alert digunakan untuk menampilkan pesan penting atau umpan balik kontekstual. Komponen ini mendukung status dismiss dan show yang dikontrol melalui opsi atribut data.

Requires Nuanxa JS

Default alert

Komponen alert dasar dengan gaya standar.

Info alert

Success alert

Warning alert

Danger alert

            
<div class="px-3 py-2 rounded-lg border text-sm font-medium bg-blue-100 text-blue-800 border-blue-300 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-700">
  Info alert
</div>
<div class="px-3 py-2 rounded-lg border font-medium text-sm bg-green-100 text-green-800 border-green-300 dark:text-green-300 dark:bg-green-950 dark:border-green-700">
  Success alert
</div>
<div class="px-3 py-2 rounded-lg border font-medium text-sm bg-yellow-100 text-yellow-800 border-yellow-300 dark:text-yellow-300 dark:bg-yellow-950 dark:border-yellow-700">
  Warning alert
</div>
<div class="px-3 py-2 rounded-lg border font-medium text-sm bg-red-100 text-red-800 border-red-300 dark:text-red-300 dark:bg-red-950 dark:border-red-700">
  Danger alert
</div>

Alert with icon

Komponen alert yang dilengkapi ikon untuk memberikan konteks visual yang lebih jelas.

Info alert

Success alert

Warning alert

Danger alert

            
<div
    class="flex items-center px-3 py-2 rounded-lg border font-medium text-sm bg-blue-100 text-blue-800 border-blue-300 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-700">
    <i class="fas fa-circle-info mr-2 text-blue-600"></i>
    <span>Info alert</span>
</div>
<div
    class="flex items-center px-3 py-2 rounded-lg border font-medium text-sm bg-green-100 text-green-800 border-green-300 dark:text-green-300 dark:bg-green-950 dark:border-green-700">
    <i class="fas fa-circle-check mr-2 text-green-600"></i>
    <span>Success alert</span>
</div>
<div
    class="flex items-center px-3 py-2 rounded-lg border font-medium text-sm bg-yellow-100 text-yellow-800 border-yellow-300 dark:text-yellow-300 dark:bg-yellow-950 dark:border-yellow-700">
    <i class="fas fa-triangle-exclamation mr-2 text-yellow-600"></i>
    <span>Warning alert</span>
</div>
<div
    class="flex items-center px-3 py-2 rounded-lg border font-medium text-sm bg-red-100 text-red-800 border-red-300 dark:text-red-300 dark:bg-red-950 dark:border-red-700">
    <i class="fas fa-circle-xmark mr-2 text-red-600"></i>
    <span>Danger alert</span>
</div>

Dismissible alert

Komponen alert yang dapat ditutup oleh pengguna.

Info alert

Success alert

Warning alert

Danger alert

            
<div
     class="alert flex items-center justify-between px-3 py-2 rounded-lg border font-medium text-sm bg-blue-100 text-blue-800 border-blue-300 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-700 transition-all duration-300">
     <div class="flex items-center">
         <i class="fas fa-circle-info mr-2 text-blue-600"></i>
         <span>Info alert</span>
     </div>
     <button type="button" class="alert-close hover:text-blue-600 transition" aria-label="Close alert">
         <i class="fas fa-xmark"></i>
     </button>
 </div>
 <div
     class="alert flex items-center justify-between px-3 py-2 rounded-lg border font-medium text-sm bg-green-100 text-green-800 border-green-300 dark:text-green-300 dark:bg-green-950 dark:border-green-700 transition-all duration-300">
     <div class="flex items-center">
         <i class="fas fa-circle-check mr-2 text-green-600"></i>
         <span>Success alert</span>
     </div>
     <button type="button" class="alert-close hover:text-green-600 transition" aria-label="Close alert">
         <i class="fas fa-xmark"></i>
     </button>
 </div>
 <div
     class="alert flex items-center justify-between px-3 py-2 rounded-lg border font-medium text-sm bg-yellow-100 text-yellow-800 border-yellow-300 dark:text-yellow-300 dark:bg-yellow-950 dark:border-yellow-700 transition-all duration-300">
     <div class="flex items-center">
         <i class="fas fa-triangle-exclamation mr-2 text-yellow-600"></i>
         <span>Warning alert</span>
     </div>
     <button type="button" class="alert-close hover:text-yellow-600 transition" aria-label="Close alert">
         <i class="fas fa-xmark"></i>
     </button>
 </div>
 <div
     class="alert flex items-center justify-between px-3 py-2 rounded-lg border font-medium text-sm bg-red-100 text-red-800 border-red-300 dark:text-red-300 dark:bg-red-950 dark:border-red-700 transition-all duration-300">
     <div class="flex items-center">
         <i class="fas fa-circle-xmark mr-2 text-red-600"></i>
         <span>Danger alert</span>
     </div>
     <button type="button" class="alert-close hover:text-red-600 transition" aria-label="Close alert">
         <i class="fas fa-xmark"></i>
     </button>
 </div>

Transparent alert

Komponen alert dengan gaya latar belakang transparan.

Info alert

Success alert

Warning alert

Danger alert

            
<div
    class="px-3 py-2 rounded-lg border text-sm font-medium bg-transparent text-blue-800 border-blue-300 dark:text-blue-300 dark:border-blue-700">
    Info alert
 </div>
 <div
    class="px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-green-800 border-green-300 dark:text-green-300 dark:border-green-700">
    Success alert
 </div>
 <div
    class="px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-yellow-800 border-yellow-300 dark:text-yellow-300 dark:border-yellow-700">
    Warning alert
 </div>
 <div
    class="px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-red-800 border-red-300 dark:text-red-300 dark:border-red-700">
    Danger alert
 </div>

Transparent icon

Komponen alert transparan yang dipadukan dengan ikon untuk konteks tambahan.

Info alert

Success alert

Warning alert

Danger alert

            
<div
    class="flex items-center px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-blue-800 border-blue-300 dark:text-blue-300 dark:border-blue-700">
    <i class="fas fa-circle-info mr-2 text-blue-600"></i>
    <span>Info alert</span>
 </div>
 <div
    class="flex items-center px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-green-800 border-green-300 dark:text-green-300 dark:border-green-700">
    <i class="fas fa-circle-check mr-2 text-green-600"></i>
    <span>Success alert</span>
 </div>
 <div
    class="flex items-center px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-yellow-800 border-yellow-300 dark:text-yellow-300 dark:border-yellow-700">
    <i class="fas fa-triangle-exclamation mr-2 text-yellow-600"></i>
    <span>Warning alert</span>
 </div>
 <div
    class="flex items-center px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-red-800 border-red-300 dark:text-red-300 dark:border-red-700">
    <i class="fas fa-circle-xmark mr-2 text-red-600"></i>
    <span>Danger alert</span>
 </div>

Transparent dismissible

Komponen alert transparan yang dapat ditutup oleh pengguna.

Info alert

Success alert

Warning alert

Danger alert

            
<div class="alert flex items-center justify-between px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-blue-800 border-blue-300 dark:text-blue-300 dark:border-blue-700 transition-all duration-300"
    role="alert">
    <div class="flex items-center">
        <i class="fas fa-circle-info mr-2 text-blue-600"></i>
        <span>Info alert</span>
    </div>
    <button type="button" class="alert-close hover:text-blue-600 transition" aria-label="Close alert">
        <i class="fas fa-xmark"></i>
    </button>
</div>
<div class="alert flex items-center justify-between px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-green-800 border-green-300 dark:text-green-300 dark:border-green-700 transition-all duration-300"
    role="alert">
    <div class="flex items-center">
        <i class="fas fa-circle-check mr-2 text-green-600"></i>
        <span>Success alert</span>
    </div>
    <button type="button" class="alert-close hover:text-green-600 transition" aria-label="Close alert">
        <i class="fas fa-xmark"></i>
    </button>
</div>
<div class="alert flex items-center justify-between px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-yellow-800 border-yellow-300 dark:text-yellow-300 dark:border-yellow-700 transition-all duration-300"
    role="alert">
    <div class="flex items-center">
        <i class="fas fa-triangle-exclamation mr-2 text-yellow-600"></i>
        <span>Warning alert</span>
    </div>
    <button type="button" class="alert-close hover:text-yellow-600 transition" aria-label="Close alert">
        <i class="fas fa-xmark"></i>
    </button>
</div>
<div class="alert flex items-center justify-between px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-red-800 border-red-300 dark:text-red-300 dark:border-red-700 transition-all duration-300"
    role="alert">
    <div class="flex items-center gap-2">
        <i class="fas fa-circle-xmark text-red-600"></i>
        <span>Danger alert</span>
    </div>

    <button type="button" class="alert-close hover:text-red-600 transition" aria-label="Close alert">
        <i class="fas fa-xmark"></i>
    </button>
</div>

Accordion

Avatar