button-group component

Drop-in semantic component. See examples, sizes, variants, and source.

Connected row (or column) of related buttons. Wrap one or more button children in button-group — middle borders collapse and rounded corners stay only at the ends. Apply size and intent modifiers to the wrapper (children inherit). Type modifiers (navigation, toggle, toolbar, pagination, tabs, stepper, compact) tune the appearance for common use cases. Use vertical for a stacked column and separated for gapped buttons.

Button Group System

Basic Button Groups

<div class="space-y-3">
  <div class="button-group">
    <button class="button">Left</button>
    <button class="button">Center</button>
    <button class="button">Right</button>
  </div>
  <div class="button-group">
    <button class="button">First</button>
    <button class="button">Second</button>
    <button class="button">Third</button>
    <button class="button">Fourth</button>
  </div>
</div>

Button Group Sizes

<div class="space-y-3">
  <div class="button-group xs">
    <button class="button">Tiny</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
  <div class="button-group sm">
    <button class="button">Small</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
  <div class="button-group">
    <button class="button">Default</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
  <div class="button-group xl">
    <button class="button">Large</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
  <div class="button-group lg">
    <button class="button">Big</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
</div>

Button Group Colors

<div class="space-y-3">
  <div class="button-group">
    <button class="button">Default</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
  <div class="button-group primary">
    <button class="button">Primary</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
  <div class="button-group positive">
    <button class="button">Positive</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
  <div class="button-group negative">
    <button class="button">Negative</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
  <div class="button-group warning">
    <button class="button">Warning</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
  <div class="button-group info">
    <button class="button">Info</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
</div>

<div class="space-y-3">
  <div class="button-group">
    <button class="button">Default</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
  <div class="button-group primary">
    <button class="button">Primary</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
  <div class="button-group positive">
    <button class="button">Positive</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
  <div class="button-group negative">
    <button class="button">Negative</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
  <div class="button-group warning">
    <button class="button">Warning</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
  <div class="button-group info">
    <button class="button">Info</button>
    <button class="button">Button</button>
    <button class="button">Group</button>
  </div>
</div>

Icon Navigation Groups

<div class="flex gap-3 flex-wrap items-center">
  <div class="button-group navigation">
    <button class="button icon">
      <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="button icon">
      <i class="icon chevron-right w-4 h-4"></i>
    </button>
  </div>
  <div class="button-group navigation primary">
    <button class="button icon">
      <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="button icon">
      <i class="icon chevron-right w-4 h-4"></i>
    </button>
  </div>
  <div class="button-group navigation positive">
    <button class="button icon">
      <i class="icon arrow-up w-4 h-4"></i>
    </button>
    <button class="button icon">
      <i class="icon arrow-down w-4 h-4"></i>
    </button>
  </div>
</div>

Separated Button Groups

<div class="space-y-3">
  <div class="button-group separated">
    <button class="button">First</button>
    <button class="button">Second</button>
    <button class="button">Third</button>
  </div>
  <div class="button-group separated primary">
    <button class="button">Save</button>
    <button class="button">Save & Exit</button>
    <button class="button">Cancel</button>
  </div>
  <div class="button-group separated positive">
    <button class="button icon">
      <i class="icon check w-4 h-4"></i>
    </button>
    <button class="button icon">
      <i class="icon copy w-4 h-4"></i>
    </button>
    <button class="button icon">
      <i class="icon download w-4 h-4"></i>
    </button>
  </div>
</div>

Toggle Button Groups

<div class="space-y-3">
  <div class="button-group toggle">
    <button class="button active">Day</button>
    <button class="button">Week</button>
    <button class="button">Month</button>
    <button class="button">Year</button>
  </div>
  <div class="button-group toggle primary">
    <button class="button">List</button>
    <button class="button active">Grid</button>
    <button class="button">Cards</button>
  </div>
  <div class="button-group toggle sm">
    <button class="button active">All</button>
    <button class="button">Active</button>
    <button class="button">Draft</button>
    <button class="button">Archived</button>
  </div>
</div>

Toolbar Button Groups

<div class="space-y-3">
  <div class="button-group toolbar">
    <button class="button icon">
      <i class="icon bold w-4 h-4"></i>
    </button>
    <button class="button icon active">
      <i class="icon italic w-4 h-4"></i>
    </button>
    <button class="button icon">
      <i class="icon underline w-4 h-4"></i>
    </button>
    <button class="button icon">
      <i class="icon strikethrough w-4 h-4"></i>
    </button>
  </div>
  <div class="button-group toolbar">
    <button class="button icon">
      <i class="icon align-left w-4 h-4"></i>
    </button>
    <button class="button icon active">
      <i class="icon align-center w-4 h-4"></i>
    </button>
    <button class="button icon">
      <i class="icon align-right w-4 h-4"></i>
    </button>
    <button class="button icon">
      <i class="icon align-justify w-4 h-4"></i>
    </button>
  </div>
</div>

Pagination Button Groups

<div class="space-y-3">
  <div class="button-group pagination">
    <button class="button icon">
      <i class="icon chevron-left w-4 h-4"></i>
    </button>
    <button class="button">1</button>
    <button class="button active">2</button>
    <button class="button">3</button>
    <button class="button">4</button>
    <button class="button">5</button>
    <button class="button icon">
      <i class="icon chevron-right w-4 h-4"></i>
    </button>
  </div>
  <div class="button-group pagination sm">
    <button class="button">Previous</button>
    <button class="button active">1</button>
    <button class="button">2</button>
    <button class="button">3</button>
    <button class="button">Next</button>
  </div>
</div>

Tab Button Groups

<div class="space-y-3">
  <div class="button-group tabs">
    <button class="button active">Overview</button>
    <button class="button">Details</button>
    <button class="button">Settings</button>
    <button class="button">History</button>
  </div>
  <div class="button-group tabs">
    <button class="button">
      <i class="icon house w-4 h-4 mr-1"></i>
      Home
    </button>
    <button class="button active">
      <i class="icon user w-4 h-4 mr-1"></i>
      Profile
    </button>
    <button class="button">
      <i class="icon settings w-4 h-4 mr-1"></i>
      Settings
    </button>
  </div>
</div>

Outline Button Groups

<div class="space-y-3">
  <div class="button-group">
    <button class="button outline">First</button>
    <button class="button outline">Second</button>
    <button class="button outline">Third</button>
  </div>
  <div class="button-group primary">
    <button class="button outline">Primary</button>
    <button class="button outline">Outline</button>
    <button class="button outline">Group</button>
  </div>
  <div class="button-group positive">
    <button class="button outline">
      <i class="icon check w-4 h-4 mr-1"></i>
      Accept
    </button>
    <button class="button outline">
      <i class="icon x w-4 h-4 mr-1"></i>
      Reject
    </button>
  </div>
</div>

Mixed Content Button Groups

<div class="space-y-3">
  <div class="button-group">
    <button class="button icon">
      <i class="icon arrow-left w-4 h-4"></i>
    </button>
    <button class="button">Back to List</button>
  </div>
  <div class="button-group positive">
    <button class="button">
      <i class="icon check-line w-4 h-4 mr-1"></i>
      Save Changes
    </button>
    <button class="button icon">
      <i class="icon chevron-down w-4 h-4"></i>
    </button>
  </div>
  <div class="button-group primary">
    <button class="button">
      <i class="icon download w-4 h-4 mr-1"></i>
      Export
    </button>
    <button class="button icon">
      <i class="icon ellipsis-vertical w-4 h-4"></i>
    </button>
  </div>
</div>

Vertical Button Groups

<div class="flex gap-4">
  <div class="button-group vertical">
    <button class="button">Top</button>
    <button class="button">Middle</button>
    <button class="button">Bottom</button>
  </div>
  <div class="button-group vertical separated">
    <button class="button">Option 1</button>
    <button class="button">Option 2</button>
    <button class="button">Option 3</button>
    <button class="button">Option 4</button>
  </div>
  <div class="button-group vertical primary">
    <button class="button icon">
      <i class="icon chevron-up w-4 h-4"></i>
    </button>
    <button class="button">Center</button>
    <button class="button icon">
      <i class="icon chevron-down w-4 h-4"></i>
    </button>
  </div>
</div>

Fluid Width Button Groups

<div class="space-y-3">
  <div class="button-group fluid">
    <button class="button">Equal</button>
    <button class="button">Width</button>
    <button class="button">Buttons</button>
  </div>
  <div class="button-group fluid primary">
    <button class="button">Save</button>
    <button class="button">Cancel</button>
  </div>
  <div class="button-group fluid separated positive">
    <button class="button">Yes</button>
    <button class="button">No</button>
    <button class="button">Maybe</button>
  </div>
</div>

Stepper Button Groups

<div class="space-y-3">
  <div class="button-group stepper">
    <button class="button completed">1</button>
    <button class="button completed">2</button>
    <button class="button active">3</button>
    <button class="button">4</button>
    <button class="button">5</button>
  </div>
  <div class="button-group stepper sm">
    <button class="button completed">
      <i class="icon check w-3 h-3"></i>
    </button>
    <button class="button completed">
      <i class="icon check w-3 h-3"></i>
    </button>
    <button class="button active">3</button>
    <button class="button">4</button>
  </div>
</div>

Compact Button Groups

<div class="flex gap-3 flex-wrap items-center">
  <div class="button-group compact">
    <button class="button">XS</button>
    <button class="button">S</button>
    <button class="button">M</button>
    <button class="button">L</button>
    <button class="button">XL</button>
  </div>
  <div class="button-group compact primary">
    <button class="button">10</button>
    <button class="button active">25</button>
    <button class="button">50</button>
    <button class="button">100</button>
  </div>
</div>

Loading States

<div class="space-y-3">
  <div class="button-group">
    <button class="button loading">Loading</button>
    <button class="button">Normal</button>
    <button class="button">Normal</button>
  </div>
  <div class="button-group primary">
    <button class="button">Save</button>
    <button class="button loading">Processing</button>
  </div>
</div>

Disabled States

<div class="space-y-3">
  <div class="button-group">
    <button class="button" disabled>Disabled</button>
    <button class="button">Enabled</button>
    <button class="button" disabled>Disabled</button>
  </div>
  <div class="button-group primary">
    <button class="button">Active</button>
    <button class="button" disabled>Inactive</button>
    <button class="button">Active</button>
  </div>
</div>

Class API Reference

Type	Class	Usage	Notes
Base	`button-group`	Container for grouped buttons	Required base class
Layout	`separated`	Adds gaps between buttons	Buttons have individual borders
	`vertical`	Stack buttons vertically	Changes to column layout
	`fluid`	Full width with equal sizing	Buttons stretch to fill container
Size	`tiny`	Extra small size	Inherits to all child buttons
	`small`	Small size	Inherits to all child buttons
	(default)	Medium size	No class needed
	`large`	Large size	Inherits to all child buttons
	`big`	Extra large size	Inherits to all child buttons
Types	`navigation`	Icon-only navigation	For prev/next controls
	`toggle`	Radio-style selection	Use with active class
	`toolbar`	Editor toolbar style	Gray background container
	`pagination`	Page navigation	Numeric pagination style
	`tabs`	Tab navigation	Underline active style
	`stepper`	Step indicators	Use with completed/active
	`compact`	Reduced padding	Tighter button spacing
	`equal`	Equal width buttons	All buttons same width
Colors	`primary`	Primary theme color	Inherits to child buttons
	`positive`	Success/confirm	Green color scheme
	`negative`	Danger/delete	Red color scheme
	`warning`	Caution/alert	Orange color scheme
	`info`	Informational	Blue color scheme
	+ all extended colors	Additional colors	red, orange, yellow, etc.
States	`active`	Active button state	Applied to individual buttons
	`completed`	Completed step	For stepper groups
	`disabled`	Disabled state	Applied to individual buttons