v1.1.1

Button Group

A set of buttons grouped together as a single visual unit.

Default

Buttons joined horizontally with shared borders.

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

With Active State

One button highlighted as the current selection.

html 
<div class="vt-btn-group">
  <button class="vt-active">Day</button>
  <button>Week</button>
  <button>Month</button>
  <button>Year</button>
</div>

With Icons

Icon-only button group for compact toolbars.

html 
<div class="vt-btn-group">
  <button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-bold">
      <path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"></path>
    </svg></button>
  <button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-italic">
      <line x1="19" x2="10" y1="4" y2="4"></line><line x1="14" x2="5" y1="20" y2="20"></line><line x1="15" x2="9" y1="4" y2="20"></line>
    </svg></button>
  <button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-strikethrough">
      <path d="M16 4H9a3 3 0 0 0-2.83 4"></path><path d="M14 12a4 4 0 0 1 0 8H6"></path><line x1="4" x2="20" y1="12" y2="12"></line>
    </svg></button>
</div>

<div class="vt-btn-group">
  <button class="vt-active"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-text-align-start">
      <path d="M21 5H3"></path><path d="M15 12H3"></path><path d="M17 19H3"></path>
    </svg></button>
  <button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-text-align-center">
      <path d="M21 5H3"></path><path d="M17 12H7"></path><path d="M19 19H5"></path>
    </svg></button>
  <button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-text-align-end">
      <path d="M21 5H3"></path><path d="M21 12H9"></path><path d="M21 19H7"></path>
    </svg></button>
</div>

Sizes

Small, default, and large button group sizes.

html 
<div class="vt-btn-group vt-btn-group-sm">
  <button>Small</button>
  <button>Group</button>
  <button>Buttons</button>
</div>

<div class="vt-btn-group">
  <button>Default</button>
  <button>Group</button>
  <button>Buttons</button>
</div>

<div class="vt-btn-group vt-btn-group-lg">
  <button>Large</button>
  <button>Group</button>
  <button>Buttons</button>
</div>

With Dropdown

Split button with a primary action and a dropdown trigger.

html 
<div class="vt-btn-group-inverted">
  <button class="vt-bg-info-fill vt-text-generic-white">Save</button>
  <button class="vt-bg-info-fill vt-text-generic-white" data-split-trigger="split1">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down">
      <path d="m6 9 6 6 6-6"></path>
    </svg>
  </button>
</div>

<div class="vt-btn-group">
  <button>Export</button>
  <button data-split-trigger="split2">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down">
      <path d="m6 9 6 6 6-6"></path>
    </svg>
  </button>
</div>

<div class="vt-btn-group-inverted">
  <button class="vt-bg-error-fill vt-text-generic-white">Delete</button>
  <button class="vt-bg-error-fill vt-text-generic-white">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down">
      <path d="m6 9 6 6 6-6"></path>
    </svg>
  </button>
</div>

Vertical

Buttons stacked vertically for sidebar or panel layouts.

html 
<div class="vt-btn-group-vertical">
  <button class="vt-active">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-house">
      <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
    </svg>
    Overview
  </button>
  <button>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chart-column">
      <path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path>
    </svg>
    Analytics
  </button>
  <button>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-settings">
      <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle>
    </svg>
    Settings
  </button>
</div>

<div class="vt-btn-group-vertical">
  <button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-menu">
      <path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path>
    </svg></button>
  <button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-layout-grid">
      <rect width="7" height="7" x="3" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="3" rx="1"></rect><rect width="7" height="7" x="14" y="14" rx="1"></rect><rect width="7" height="7" x="3" y="14" rx="1"></rect>
    </svg></button>
  <button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-sliders-horizontal">
      <path d="M10 5H3"></path><path d="M12 19H3"></path><path d="M14 3v4"></path><path d="M16 17v4"></path><path d="M21 12h-9"></path><path d="M21 19h-5"></path><path d="M21 5h-7"></path><path d="M8 10v4"></path><path d="M8 12H3"></path>
    </svg></button>
</div>

Guidelines

Segmented control of related toggles/actions (Day/Week/Month). More than ~4 options → select.

Do
Use a group for related, mutually exclusive options like a time range.
Don't
Don't cram many options into a group — use a select past ~4.
Do
Mark the current selection with the active state.
Don't
Don't leave a segmented control with no option selected.

API Reference

All CSS classes available for the Button Group component.

Class Type Description
vt-btn-group Base Horizontal button group — auto-styles child buttons
vt-btn-group-inverted Base Button group without outer border — for colored split buttons
vt-btn-group-vertical Base Vertical button group — auto-styles child buttons
vt-btn-group-sm Size Small size modifier — smaller height and padding
vt-btn-group-lg Size Large size modifier — taller height and wider padding
vt-active State Active/selected button highlighting

Accessibility

Keyboard and screen reader support.

Feature Details
Role Use role="group" with aria-label describing the group purpose
Keyboard Tab moves between groups, arrow keys move within the group
Focus Visible focus ring on each button via :focus-visible
Toggle Active button should have aria-pressed="true" for toggle groups
Built with:
Button