Button Group

A Tailwind CSS button group component for grouping related buttons together.

<div class="btn-group">
  <button class="btn">Left</button>
  <button class="btn">Center</button>
  <button class="btn">Right</button>
</div>

Sizes

Button groups work with all button sizes.

<div class="flex flex-col gap-4">
  <div class="btn-group">
    <button class="btn btn-sm">Left</button>
    <button class="btn btn-sm">Center</button>
    <button class="btn btn-sm">Right</button>
  </div>
  <div class="btn-group">
    <button class="btn">Left</button>
    <button class="btn">Center</button>
    <button class="btn">Right</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-lg">Left</button>
    <button class="btn btn-lg">Center</button>
    <button class="btn btn-lg">Right</button>
  </div>
</div>

Vertical

Stack buttons vertically using btn-group-vertical.

<div class="btn-group btn-group-vertical">
  <button class="btn btn-icon" aria-label="Increase">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
  </button>
  <button class="btn btn-icon" aria-label="Decrease">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
  </button>
</div>

With separator

Add visual separation between buttons using btn-group-separator. Recommended for variants without borders like btn-secondary.

<div class="btn-group">
  <button class="btn btn-secondary">Save</button>
  <div class="btn-group-separator"></div>
  <button class="btn btn-secondary btn-icon" aria-label="More options">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
  </button>
</div>

With text addon

Use btn-group-text for non-interactive text labels alongside inputs.

https://

<div class="btn-group">
  <span class="btn-group-text">https://</span>
  <input class="input" placeholder="example.com" />
</div>

How it works

The button group component uses .btn-group as a container to visually connect related buttons.

Structure

Wrap buttons in a .btn-group container:

<div class="btn-group">
  <button class="btn">Left</button>
  <button class="btn">Right</button>
</div>

Vertical layout

Add .btn-group-vertical for a vertical stack:

<div class="btn-group btn-group-vertical">
  <button class="btn">Top</button>
  <button class="btn">Bottom</button>
</div>

Class reference

Class	Description
`btn-group`	Container for grouping buttons
`btn-group-horizontal`	Horizontal layout (default)
`btn-group-vertical`	Vertical layout
`btn-group-separator`	Visual separator between buttons
`btn-group-text`	Non-interactive text addon