Button Groups

Basic

Last Edited on January 25, 2022

<div class="relative z-0 flex -space-x-px">
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-l border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    Prev
  </button>
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-r border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    Next
  </button>
</div>

<div class="relative z-0 flex -space-x-px">
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-l border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    Prev
  </button>
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    Now
  </button>
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-r border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    Next
  </button>
</div>

Dropdown Buttons

Last Edited on January 25, 2022

<div class="flex space-x-2">
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    <span>Type</span>
    <svg class="h-3 w-3 stroke-gray-400" viewBox="0 0 256 256">
      <polyline
        points="208 96 128 176 48 96"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="32"></polyline>
    </svg>
  </button>
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    <span>Language</span>
    <svg class="h-3 w-3 stroke-gray-400" viewBox="0 0 256 256">
      <polyline
        points="208 96 128 176 48 96"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="32"></polyline>
    </svg>
  </button>
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-gray-200 bg-white px-3 py-2 text-xs font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    <span>Sort</span>
    <svg class="h-3 w-3 stroke-gray-400" viewBox="0 0 256 256">
      <polyline
        points="208 96 128 176 48 96"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="32"></polyline>
    </svg>
  </button>
</div>

Split Button

Last Edited on January 25, 2022

<div class="relative z-0 flex">
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-l border border-blue-700 bg-blue-700 px-3 py-2 text-xs font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:z-10 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
    Save Task
  </button>
  <div aria-hidden="true" class="w-px bg-blue-800"></div>
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-r border border-blue-700 bg-blue-700 px-2 py-2 text-xs font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:z-10 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
    <svg class="h-3 w-3 stroke-white" viewBox="0 0 256 256">
      <polyline
        points="208 96 128 176 48 96"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="28"></polyline>
    </svg>
  </button>
</div>

With Border

Last Edited on January 25, 2022

<div class="relative z-0 flex space-x-0.5 rounded border border-gray-200 p-0.5">
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded border border-blue-700 bg-blue-700 px-3 py-2 text-sm font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
    <svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
      <polyline
        points="160 208 80 128 160 48"
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></polyline>
    </svg>
  </button>
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded border border-white bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-white hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    <svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
      <polyline
        points="96 48 176 128 96 208"
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></polyline>
    </svg>
  </button>
</div>

<div class="relative z-0 flex space-x-0.5 rounded border border-gray-200 p-0.5">
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded border border-blue-700 bg-blue-700 px-3 py-2 text-sm font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
    <svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
      <rect width="256" height="256" fill="none"></rect>
      <line
        x1="40"
        y1="68"
        x2="216"
        y2="68"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="40"
        y1="108"
        x2="168"
        y2="108"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="40"
        y1="148"
        x2="216"
        y2="148"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="40"
        y1="188"
        x2="168"
        y2="188"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
    </svg>
  </button>
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded border border-white bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-white hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    <svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
      <line
        x1="40"
        y1="68"
        x2="216"
        y2="68"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="64"
        y1="108"
        x2="192"
        y2="108"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="40"
        y1="148"
        x2="216"
        y2="148"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="64"
        y1="188"
        x2="192"
        y2="188"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
    </svg>
  </button>
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded border border-white bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-white hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    <svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
      <line
        x1="40"
        y1="68"
        x2="216"
        y2="68"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="88"
        y1="108"
        x2="216"
        y2="108"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="40"
        y1="148"
        x2="216"
        y2="148"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="88"
        y1="188"
        x2="216"
        y2="188"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
    </svg>
  </button>
</div>

With Icon

Last Edited on January 25, 2022

<div class="relative z-0 flex -space-x-px">
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-l border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    <svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
      <polyline
        points="160 208 80 128 160 48"
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></polyline>
    </svg>
  </button>
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-r border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    <svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
      <polyline
        points="96 48 176 128 96 208"
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></polyline>
    </svg>
  </button>
</div>

<div class="relative z-0 flex -space-x-px">
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-l border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    <svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
      <rect width="256" height="256" fill="none"></rect>
      <line
        x1="40"
        y1="68"
        x2="216"
        y2="68"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="40"
        y1="108"
        x2="168"
        y2="108"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="40"
        y1="148"
        x2="216"
        y2="148"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="40"
        y1="188"
        x2="168"
        y2="188"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
    </svg>
  </button>
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    <svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
      <line
        x1="40"
        y1="68"
        x2="216"
        y2="68"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="64"
        y1="108"
        x2="192"
        y2="108"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="40"
        y1="148"
        x2="216"
        y2="148"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="64"
        y1="188"
        x2="192"
        y2="188"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
    </svg>
  </button>
  <button
    type="button"
    class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded-r border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-800 transition hover:border-gray-300 hover:bg-gray-100 focus:z-10 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
    <svg class="h-4 w-4 shrink-0" viewBox="0 0 256 256">
      <line
        x1="40"
        y1="68"
        x2="216"
        y2="68"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="88"
        y1="108"
        x2="216"
        y2="108"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="40"
        y1="148"
        x2="216"
        y2="148"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
      <line
        x1="88"
        y1="188"
        x2="216"
        y2="188"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="24"></line>
    </svg>
  </button>
</div>