Skip to content
Early Access

Button Groups

Button groups are used to group related buttons together.

Basic Button Group

PreviewCode
<div class="relative z-0 flex -space-x-px">
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md rounded-r-none">
    <span>Prev</span>
  </button>
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md rounded-l-none">
    <span>Next</span>
  </button>
</div>
<div class="relative z-0 flex -space-x-px">
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md rounded-r-none">
    <span>Prev</span>
  </button>
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-none">
    <span>Now</span>
  </button>
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md rounded-l-none">
    <span>Next</span>
  </button>
</div>

Split Button

PreviewCode
<div class="relative z-0 flex -space-x-px">
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-blue-700/75 focus:ring-blue-600 bg-blue-600 text-white hover:bg-blue-700 hover:border-blue-700 px-3 py-1.5 text-sm font-medium rounded-md rounded-r-none">
    <span>Send Now</span>
  </button>
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-blue-700/75 focus:ring-blue-600 bg-blue-600 text-white hover:bg-blue-700 hover:border-blue-700 px-3 py-1.5 text-sm font-medium rounded-md rounded-l-none">
    <span>
      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4">
        <path d="m6 9 6 6 6-6">
        </path>
      </svg>
    </span>
  </button>
</div>

Shared Border

PreviewCode
<div class="relative z-0 flex space-x-0.5 rounded border border-slate-200 p-1">
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-blue-700/75 focus:ring-blue-600 bg-blue-600 text-white hover:bg-blue-700 hover:border-blue-700 px-3 py-1.5 text-sm font-medium rounded-md">
    <span>
      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
        <path d="m15 6-6 6 6 6">
        </path>
      </svg>
    </span>
  </button>
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md border-0">
    <span>
      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
        <path d="m9 18 6-6-6-6">
        </path>
      </svg>
    </span>
  </button>
</div>
<div class="relative z-0 flex space-x-0.5 rounded border border-slate-200 p-1">
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-blue-700/75 focus:ring-blue-600 bg-blue-600 text-white hover:bg-blue-700 hover:border-blue-700 px-3 py-1.5 text-sm font-medium rounded-md">
    <span>
      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
        <path d="M4.5 6h15m-15 4h10m-10 4h15m-15 4h10">
        </path>
      </svg>
    </span>
  </button>
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md border-0">
    <span>
      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
        <path d="M4.5 6h15M7 10h10M4.5 14h15M7 18h10">
        </path>
      </svg>
    </span>
  </button>
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md border-0">
    <span>
      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
        <path d="M4.5 6h15m-10 4h10m-15 4h15m-10 4h10">
        </path>
      </svg>
    </span>
  </button>
</div>

With Icons

PreviewCode
<div class="relative z-0 flex -space-x-px">
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md rounded-r-none">
    <span>
      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
        <path d="m15 6-6 6 6 6">
        </path>
      </svg>
    </span>
  </button>
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md rounded-l-none">
    <span>
      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
        <path d="m9 18 6-6-6-6">
        </path>
      </svg>
    </span>
  </button>
</div>
<div class="relative z-0 flex -space-x-px">
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md rounded-r-none">
    <span>
      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
        <path d="M4.5 6h15m-15 4h10m-10 4h15m-15 4h10">
        </path>
      </svg>
    </span>
  </button>
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-none">
    <span>
      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
        <path d="M4.5 6h15M7 10h10M4.5 14h15M7 18h10">
        </path>
      </svg>
    </span>
  </button>
  <button class="disabled:opacity-50 transition inline-flex items-center justify-center space-x-1.5 border focus:outline-none focus:ring-2 focus:ring-offset-2 focus:z-10 shrink-0 border-slate-300 focus:ring-slate-500 bg-white text-slate-900 hover:bg-slate-50 px-3 py-1.5 text-sm font-medium rounded-md rounded-l-none">
    <span>
      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5">
        <path d="M4.5 6h15m-10 4h10m-15 4h15m-10 4h10">
        </path>
      </svg>
    </span>
  </button>
</div>