Tailwind CSS Badge - Nuanxa

Komponen badge digunakan untuk menampilkan informasi singkat atau pembaruan status. Komponen ini mendukung berbagai gaya dan dapat dengan mudah dikustomisasi.

Requires Nuanxa JS

Default badge

Komponen badge dasar dengan gaya standar.

Blue Green Red Orange Yellow Purple Cyan Gray Pink

            
<span
  class="px-2 py-1 text-xs font-semibold rounded-md bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
  >Blue
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-md bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
  >Green
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-md bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
  >Red
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-md bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"
  >Orange
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-md bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
  >Yellow
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-md bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200"
  >Purple
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-md bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200"
  >Cyan</span
>
<span
  class="px-2 py-1 text-xs font-semibold rounded-md bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
  >Gray
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-md bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200"
>
  Pink
</span>

Pills badge

Komponen badge dengan tampilan pill yang membulat.

Blue Green Red Orange Yellow Purple Cyan Gray Pink

            
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
  >Blue
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
  >Green
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
  >Red
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"
  >Orange
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
  >Yellow
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200"
  >Purple
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200"
  >Cyan
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200"
  >Gray
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200"
  >Pink
</span>

Glass badge

Komponen badge dengan efek kaca transparan.

Blue Green Red Orange Yellow Purple Cyan Gray Pink

            
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-500/20 text-blue-400 border border-blue-400/20 backdrop-blur-md"
  >Blue
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-green-500/20 text-green-400 border border-green-400/20 backdrop-blur-md"
  >Green
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-red-500/20 text-red-400 border border-red-400/20 backdrop-blur-md"
  >Red
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-orange-500/20 text-orange-400 border border-orange-400/20 backdrop-blur-md"
  >Orange
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-500/20 text-yellow-400 border border-yellow-400/20 backdrop-blur-md"
  >Yellow
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-purple-500/20 text-purple-400 border border-purple-400/20 backdrop-blur-md"
  >Purple
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-cyan-500/20 text-cyan-400 border border-cyan-400/20 backdrop-blur-md"
  >Cyan
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-500/20 text-gray-400 border border-gray-400/20 backdrop-blur-md"
  >Gray
</span>
<span
  class="px-2 py-1 text-xs font-semibold rounded-full bg-pink-500/20 text-pink-400 border border-pink-400/20 backdrop-blur-md"
  >Pink
</span>

Dismissable badge

Komponen badge yang dapat dihapus atau ditutup oleh pengguna.

Blue Green Red Orange Yellow Purple Cyan Gray Pink

            
<span
  class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 transition-all duration-300"
>
  Blue
  <button
    type="button"
    class="badge-close ml-1 text-[10px] font-bold cursor-pointer opacity-70 hover:opacity-100"
  >
    &times;
  </button>
</span>
<span
  class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 transition-all duration-300"
>
  Green
  <button
    type="button"
    class="badge-close ml-1 text-[10px] font-bold opacity-70 hover:opacity-100"
  >
    &times;
  </button>
</span>
<span
  class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 transition-all duration-300"
>
  Red
  <button
    type="button"
    class="badge-close ml-1 text-[10px] font-bold opacity-70 hover:opacity-100"
  >
    &times;
  </button>
</span>
<span
  class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 transition-all duration-300"
>
  Orange
  <button
    type="button"
    class="badge-close ml-1 text-[10px] font-bold opacity-70 hover:opacity-100"
  >
    &times;
  </button>
</span>
<span
  class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 transition-all duration-300"
>
  Yellow
  <button
    type="button"
    class="badge-close ml-1 text-[10px] font-bold opacity-70 hover:opacity-100"
  >
    &times;
  </button>
</span>
<span
  class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200 transition-all duration-300"
>
  Purple
  <button
    type="button"
    class="badge-close ml-1 text-[10px] font-bold opacity-70 hover:opacity-100"
  >
    &times;
  </button>
</span>
<span
  class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200 transition-all duration-300"
>
  Cyan
  <button
    type="button"
    class="badge-close ml-1 text-[10px] font-bold opacity-70 hover:opacity-100"
  >
    &times;
  </button>
</span>
<span
  class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 transition-all duration-300"
>
  Gray
  <button
    type="button"
    class="badge-close ml-1 text-[10px] font-bold opacity-70 hover:opacity-100"
  >
    &times;
  </button>
</span>
<span
  class="badge inline-flex items-center px-2 py-1 text-xs font-semibold rounded-md bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200 transition-all duration-300"
>
  Pink
  <button
    type="button"
    class="badge-close ml-1 text-[10px] font-bold opacity-70 hover:opacity-100"
  >
    &times;
  </button>
</span>

Notification badge

Komponen badge yang digunakan untuk menampilkan jumlah notifikasi atau indikator status.

            
<div class="relative">
  <button class="relative p-3 bg-gray-100 dark:bg-gray-800 rounded-full">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="w-6 h-6 text-gray-700 dark:text-gray-200"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0a3 3 0 01-6 0"
      />
    </svg>
    <span
      class="absolute animate-bounce duration-300 top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-600 text-white text-[10px] font-semibold"
      >5</span
    >
  </button>
</div>
<div class="relative">
  <img
    src="https://i.pravatar.cc/40"
    class="w-10 h-10 rounded-full"
    alt="User"
  />
  <span
    class="absolute animate-pulse duration-300 top-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-white dark:ring-gray-900"
  ></span>
</div>
<div class="relative">
  <button class="px-4 py-2 bg-blue-600 text-white rounded-md relative">
    Messages
    <span
      class="absolute animate-bounce duration-300 -top-2 -right-2 px-1.5 py-0.5 text-[10px] font-semibold bg-red-600 text-white rounded-full"
      >9+</span
    >
  </button>
</div>

Avatar

Breadcrumb