Tailwind CSS Button Group - Nuanxa
Button group adalah kumpulan tombol yang dikelompokkan bersama untuk menyediakan antarmuka pengguna yang konsisten untuk tindakan terkait. Komponen ini umum digunakan dalam aplikasi web untuk mengatur dan menampilkan beberapa tombol dengan cara yang menarik secara visual dan fungsional.
Default button group
Button default digunakan untuk tindakan utama dalam antarmuka pengguna.
<div
class="inline-flex rounded-md shadow-sm border border-gray-300 dark:border-gray-700 divide-x divide-gray-300 dark:divide-gray-700 overflow-hidden"
role="group"
>
<button
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
>
Save
</button>
<button
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
>
Edit
</button>
<button
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
>
Delete
</button>
</div>
Filter button group
Button filter digunakan untuk menerapkan filter pada daftar atau grid item.
<div
class="inline-flex rounded-md shadow-sm border border-gray-300 dark:border-gray-700 divide-x divide-gray-300 dark:divide-gray-700 overflow-hidden"
role="group"
>
<button
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
>
All
</button>
<button
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
>
Active
</button>
<button
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
>
Pending
</button>
<button
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
>
Archived
</button>
</div>
Button group dropdown
Button dengan dropdown digunakan untuk menyediakan opsi atau tindakan tambahan.
<div
class="inline-flex rounded-l-md rounded-r-md shadow-sm border border-gray-300 dark:border-gray-700 divide-x divide-gray-300 dark:divide-gray-700"
role="group"
>
<button
aria-label="save"
class="px-4 py-2 text-sm font-medium rounded-l-md text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
>
Save
</button>
<div class="dropdown relative inline-block text-left">
<button
aria-label="toggleDropdown"
class="px-2 py-2 text-sm font-medium rounded-r-md text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
>
<i class="fas fa-chevron-down text-xs"></i>
</button>
<ul
class="absolute hidden left-0 mt-2 w-32 bg-white dark:bg-gray-800 shadow-lg border border-gray-300 dark:border-gray-700 rounded-md z-2"
>
<li>
<a
href="#1"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
>Save Draft</a
>
</li>
<li>
<a
href="#2"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
>Save & Close</a
>
</li>
<li>
<a
href="#3"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
>Save As Copy</a
>
</li>
</ul>
</div>
</div>
Pagination button group
Button pagination digunakan untuk berpindah antar halaman konten.
<div
class="inline-flex rounded-md shadow-sm border border-gray-300 dark:border-gray-700 overflow-hidden divide-x divide-gray-300 dark:divide-gray-700"
role="group"
>
<!-- Left -->
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
>
Prev
</button>
<!-- Middle -->
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
>
1
</button>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
>
2
</button>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
>
3
</button>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
>
4
</button>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
>
5
</button>
<!-- Right -->
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 transition"
>
Next
</button>
</div>