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.

Requires Nuanxa JS

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>

Button

Card