Tailwind CSS Button - Nuanxa
Komponen button digunakan untuk menampilkan tombol interaktif. Komponen ini mendukung berbagai gaya dan dapat dengan mudah dikustomisasi.
Default button
Komponen button dasar dengan gaya standar.
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Blue
</button>
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:text-green-50 dark:hover:bg-green-400 transition"
>
Green
</button>
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:text-red-50 dark:hover:bg-red-400 transition"
>
Red
</button>
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:text-orange-50 dark:hover:bg-orange-400 transition"
>
Orange
</button>
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg text-gray-900 bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-500 dark:text-gray-900 dark:hover:bg-yellow-400 transition"
>
Yellow
</button>
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:text-purple-50 dark:hover:bg-purple-400 transition"
>
Purple
</button>
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-cyan-600 hover:bg-cyan-700 dark:bg-cyan-500 dark:text-cyan-50 dark:hover:bg-cyan-400 transition"
>
Cyan
</button>
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-gray-600 hover:bg-gray-700 dark:bg-gray-500 dark:text-gray-50 dark:hover:bg-gray-400 transition"
>
Gray
</button>
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-pink-600 hover:bg-pink-700 dark:bg-pink-500 dark:text-pink-50 dark:hover:bg-pink-400 transition"
>
Pink
</button>
Outline button
Komponen button outline dengan gaya garis tepi.
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-500 dark:hover:text-white transition"
>
Blue
</button>
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-green-600 text-green-600 hover:bg-green-600 hover:text-white dark:border-green-400 dark:text-green-400 dark:hover:bg-green-500 dark:hover:text-white transition"
>
Green
</button>
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-red-600 text-red-600 hover:bg-red-600 hover:text-white dark:border-red-400 dark:text-red-400 dark:hover:bg-red-500 dark:hover:text-white transition"
>
Red
</button>
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-orange-600 text-orange-600 hover:bg-orange-600 hover:text-white dark:border-orange-400 dark:text-orange-400 dark:hover:bg-orange-500 dark:hover:text-white transition"
>
Orange
</button>
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-yellow-500 text-yellow-600 hover:bg-yellow-500 hover:text-gray-900 dark:border-yellow-400 dark:text-yellow-300 dark:hover:bg-yellow-400 dark:hover:text-gray-900 transition"
>
Yellow
</button>
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white dark:border-purple-400 dark:text-purple-400 dark:hover:bg-purple-500 dark:hover:text-white transition"
>
Purple
</button>
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-cyan-600 text-cyan-600 hover:bg-cyan-600 hover:text-white dark:border-cyan-400 dark:text-cyan-400 dark:hover:bg-cyan-500 dark:hover:text-white transition"
>
Cyan
</button>
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-gray-500 text-gray-700 hover:bg-gray-600 hover:text-white dark:border-gray-400 dark:text-gray-300 dark:hover:bg-gray-500 dark:hover:text-white transition"
>
Gray
</button>
<button
class="px-3 py-1.5 text-sm font-semibold rounded-lg border border-pink-600 text-pink-600 hover:bg-pink-600 hover:text-white dark:border-pink-400 dark:text-pink-400 dark:hover:bg-pink-500 dark:hover:text-white transition"
>
Pink
</button>
Pills button
Komponen button pills dengan gaya membulat.
<button
class="px-4 py-1.5 text-sm font-semibold rounded-full text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Blue
</button>
<button
class="px-4 py-1.5 text-sm font-semibold rounded-full text-white bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:text-green-50 dark:hover:bg-green-400 transition"
>
Green
</button>
<button
class="px-4 py-1.5 text-sm font-semibold rounded-full text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:text-red-50 dark:hover:bg-red-400 transition"
>
Red
</button>
<button
class="px-4 py-1.5 text-sm font-semibold rounded-full text-white bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:text-orange-50 dark:hover:bg-orange-400 transition"
>
Orange
</button>
<button
class="px-4 py-1.5 text-sm font-semibold rounded-full text-gray-900 bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-500 dark:text-gray-900 dark:hover:bg-yellow-400 transition"
>
Yellow
</button>
<button
class="px-4 py-1.5 text-sm font-semibold rounded-full text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:text-purple-50 dark:hover:bg-purple-400 transition"
>
Purple
</button>
<button
class="px-4 py-1.5 text-sm font-semibold rounded-full text-white bg-cyan-600 hover:bg-cyan-700 dark:bg-cyan-500 dark:text-cyan-50 dark:hover:bg-cyan-400 transition"
>
Cyan
</button>
<button
class="px-4 py-1.5 text-sm font-semibold rounded-full text-white bg-gray-600 hover:bg-gray-700 dark:bg-gray-500 dark:text-gray-50 dark:hover:bg-gray-400 transition"
>
Gray
</button>
<button
class="px-4 py-1.5 text-sm font-semibold rounded-full text-white bg-pink-600 hover:bg-pink-700 dark:bg-pink-500 dark:text-pink-50 dark:hover:bg-pink-400 transition"
>
Pink
</button>
Button with icon
Komponen button dengan ikon.
<button
class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition"
>
Blue <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<button
class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400 transition"
>
Green <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<button
class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400 transition"
>
Red <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<button
class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400 transition"
>
Orange <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<button
class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-gray-900 bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-500 dark:hover:bg-yellow-400 transition"
>
Yellow <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<button
class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-400 transition"
>
Purple <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<button
class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-cyan-600 hover:bg-cyan-700 dark:bg-cyan-500 dark:hover:bg-cyan-400 transition"
>
Cyan <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<button
class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-gray-600 hover:bg-gray-700 dark:bg-gray-500 dark:hover:bg-gray-400 transition"
>
Gray <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
<button
class="flex items-center gap-2 px-3 py-1.5 text-sm font-semibold rounded-lg text-white bg-pink-600 hover:bg-pink-700 dark:bg-pink-500 dark:hover:bg-pink-400 transition"
>
Pink <i class="fa-solid fa-arrow-right text-xs"></i>
</button>
Social button
Button dengan gaya untuk berbagai platform media sosial.
<button class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-[#1877F2] hover:bg-[#0d65d9] dark:hover:bg-[#1a6be0] transition" > <i class="fa-brands fa-facebook-f"></i> Facebook </button> <button class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-[#000000] hover:bg-[#1a1a1a] dark:bg-[#111] dark:hover:bg-[#222] transition" > <i class="fa-brands fa-x-twitter"></i> Twitter </button> <button class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 hover:opacity-90 transition" > <i class="fa-brands fa-instagram"></i> Instagram </button> <button class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-[#0A66C2] hover:bg-[#094a8f] transition" > <i class="fa-brands fa-linkedin-in"></i> LinkedIn </button> <button class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-[#FF0000] hover:bg-[#cc0000] transition" > <i class="fa-brands fa-youtube"></i> YouTube </button> <button class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-[#25D366] hover:bg-[#1ebe5d] transition" > <i class="fa-brands fa-whatsapp"></i> WhatsApp </button> <button class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-[#24292e] hover:bg-[#171a1d] dark:bg-[#333] dark:hover:bg-[#222] transition" > <i class="fa-brands fa-github"></i> GitHub </button> <button class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-[#229ED9] hover:bg-[#1b89bd] transition" > <i class="fa-brands fa-telegram"></i> Telegram </button> <button class="flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-[#010101] hover:bg-[#242424] dark:bg-[#111] dark:hover:bg-[#222] transition" > <i class="fa-brands fa-tiktok"></i> TikTok </button>