From 0acd3a8828799a6433f789a5ff958cdefe1a306d Mon Sep 17 00:00:00 2001
From: Francisco Diaz <franciscod@empathy.co>
Date: Fri, 20 Feb 2026 10:15:04 +0100
Subject: [PATCH] feat(x-design-system): button group component

---
 packages/x-design-system/demo/src/app.vue     |   2 +
 .../demo/src/components/button-group.vue      | 242 ++++++++++++++++++
 .../lib/components/button-group.css           |  25 ++
 .../x-design-system/lib/components/index.css  |   1 +
 4 files changed, 270 insertions(+)
 create mode 100644 packages/x-design-system/demo/src/components/button-group.vue
 create mode 100644 packages/x-design-system/lib/components/button-group.css

diff --git a/packages/x-design-system/demo/src/app.vue b/packages/x-design-system/demo/src/app.vue
index dcef79d0a0..6ba0b09ba1 100644
--- a/packages/x-design-system/demo/src/app.vue
+++ b/packages/x-design-system/demo/src/app.vue
@@ -1,11 +1,13 @@
 <template>
   <Badge />
   <Button />
+  <ButtonGroup />
   <Integration />
 </template>
 
 <script setup lang="ts">
 import Badge from './components/badge.vue'
+import ButtonGroup from './components/button-group.vue'
 import Button from './components/button.vue'
 import Integration from './components/integration.vue'
 </script>
diff --git a/packages/x-design-system/demo/src/components/button-group.vue b/packages/x-design-system/demo/src/components/button-group.vue
new file mode 100644
index 0000000000..c1f434e9f5
--- /dev/null
+++ b/packages/x-design-system/demo/src/components/button-group.vue
@@ -0,0 +1,242 @@
+<template>
+  <Wrapper feature="Button" :rows="rows">
+    <template #default>
+      <div class="xds:flex xds:flex-wrap xds:gap-5">
+        <div class="xds:button-group">
+          <button class="xds:button">BUTTON 1</button>
+          <button class="xds:button">BUTTON 2</button>
+          <button class="xds:button">BUTTON 3</button>
+        </div>
+        <div class="xds:button-group xds:gap-8">
+          <button class="xds:button">BUTTON 1</button>
+          <span class="xds:button-group-divider"></span>
+          <button class="xds:button">BUTTON 2</button>
+          <span class="xds:button-group-divider"></span>
+          <button class="xds:button">BUTTON 3</button>
+        </div>
+        <div class="xds:button-group">
+          <button class="xds:button xds:button-outlined">BUTTON 1</button>
+          <button class="xds:button xds:button-outlined">BUTTON 2</button>
+          <button class="xds:button">BUTTON 3</button>
+        </div>
+        <div class="xds:button-group xds:gap-8">
+          <button class="xds:button xds:button-outlined">BUTTON 1</button>
+          <button class="xds:button xds:button-outlined">BUTTON 2</button>
+          <button class="xds:button">BUTTON 3</button>
+        </div>
+        <div class="xds:button-group xds:gap-8">
+          <button class="xds:button xds:button-outlined">BUTTON 1</button>
+          <span class="xds:button-group-divider"></span>
+          <button class="xds:button xds:button-outlined">BUTTON 2</button>
+          <span class="xds:button-group-divider"></span>
+          <button class="xds:button">BUTTON 3</button>
+        </div>
+        <div class="xds:button-group xds:text-red-500">
+          <button class="xds:button xds:button-ghost">BUTTON 1</button>
+          <span class="xds:button-group-divider"></span>
+          <button class="xds:button xds:button-ghost">BUTTON 2</button>
+          <span class="xds:button-group-divider"></span>
+          <button class="xds:button xds:button-ghost xds:button-warning">BUTTON 3</button>
+        </div>
+        <div class="xds:button-group xds:gap-8 xds:text-red-500">
+          <button class="xds:button xds:button-tight">BUTTON 1</button>
+          <button class="xds:button xds:button-tight">BUTTON 2</button>
+          <button class="xds:button xds:button-tight xds:button-warning">BUTTON 3</button>
+        </div>
+        <div class="xds:button-group xds:text-red-500">
+          <button class="xds:button xds:button-highlight xds:button-circle">
+            <svg
+              viewBox="0 0 8 8"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="xds:size-12"
+            >
+              <path
+                d="M4 1.5V6.5M1.5 4H6.5"
+                stroke="currentColor"
+                stroke-width="0.4"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+          <button class="xds:button xds:button-ghost xds:button-success xds:button-square">
+            <svg
+              viewBox="0 0 8 8"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="xds:size-12"
+            >
+              <path
+                d="M4 1.5V6.5M1.5 4H6.5"
+                stroke="currentColor"
+                stroke-width="0.4"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+        <div class="xds:button-group xds:text-red-500">
+          <button class="xds:button xds:button-highlight xds:button-square">
+            <svg
+              viewBox="0 0 8 8"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="xds:size-12"
+            >
+              <path
+                d="M4 1.5V6.5M1.5 4H6.5"
+                stroke="currentColor"
+                stroke-width="0.4"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+          <button class="xds:button xds:button-ghost xds:button-success xds:button-square">
+            <svg
+              viewBox="0 0 8 8"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="xds:size-12"
+            >
+              <path
+                d="M4 1.5V6.5M1.5 4H6.5"
+                stroke="currentColor"
+                stroke-width="0.4"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </template>
+    <template #rounded>
+      <div class="xds:flex xds:flex-wrap xds:gap-5 xds:rounded-xl">
+        <div class="xds:button-group">
+          <button class="xds:button">BUTTON 1</button>
+          <button class="xds:button">BUTTON 2</button>
+          <button class="xds:button">BUTTON 3</button>
+        </div>
+        <div class="xds:button-group xds:gap-8 xds:rounded-xl">
+          <button class="xds:button">BUTTON 1</button>
+          <span class="xds:button-group-divider"></span>
+          <button class="xds:button">BUTTON 2</button>
+          <span class="xds:button-group-divider"></span>
+          <button class="xds:button">BUTTON 3</button>
+        </div>
+        <div class="xds:button-group xds:rounded-xl">
+          <button class="xds:button xds:button-outlined">BUTTON 1</button>
+          <button class="xds:button xds:button-outlined">BUTTON 2</button>
+          <button class="xds:button">BUTTON 3</button>
+        </div>
+        <div class="xds:button-group xds:gap-8 xds:rounded-xl">
+          <button class="xds:button xds:button-outlined">BUTTON 1</button>
+          <button class="xds:button xds:button-outlined">BUTTON 2</button>
+          <button class="xds:button">BUTTON 3</button>
+        </div>
+        <div class="xds:button-group xds:gap-8 xds:rounded-xl">
+          <button class="xds:button xds:button-outlined">BUTTON 1</button>
+          <span class="xds:button-group-divider"></span>
+          <button class="xds:button xds:button-outlined">BUTTON 2</button>
+          <span class="xds:button-group-divider"></span>
+          <button class="xds:button">BUTTON 3</button>
+        </div>
+        <div class="xds:button-group xds:text-red-500 xds:rounded-xl">
+          <button class="xds:button xds:button-ghost">BUTTON 1</button>
+          <span class="xds:button-group-divider"></span>
+          <button class="xds:button xds:button-ghost">BUTTON 2</button>
+          <span class="xds:button-group-divider"></span>
+          <button class="xds:button xds:button-ghost xds:button-warning">BUTTON 3</button>
+        </div>
+        <div class="xds:button-group xds:gap-8 xds:text-red-500">
+          <button class="xds:button xds:button-tight">BUTTON 1</button>
+          <button class="xds:button xds:button-tight">BUTTON 2</button>
+          <button class="xds:button xds:button-tight xds:button-warning">BUTTON 3</button>
+        </div>
+        <div class="xds:button-group xds:text-red-500 xds:rounded-xl">
+          <button class="xds:button xds:button-highlight xds:button-circle">
+            <svg
+              viewBox="0 0 8 8"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="xds:size-12"
+            >
+              <path
+                d="M4 1.5V6.5M1.5 4H6.5"
+                stroke="currentColor"
+                stroke-width="0.4"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+          <button class="xds:button xds:button-ghost xds:button-success xds:button-square">
+            <svg
+              viewBox="0 0 8 8"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="xds:size-12"
+            >
+              <path
+                d="M4 1.5V6.5M1.5 4H6.5"
+                stroke="currentColor"
+                stroke-width="0.4"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+        <div class="xds:button-group xds:text-red-500 xds:rounded-xl">
+          <button class="xds:button xds:button-highlight xds:button-square">
+            <svg
+              viewBox="0 0 8 8"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="xds:size-12"
+            >
+              <path
+                d="M4 1.5V6.5M1.5 4H6.5"
+                stroke="currentColor"
+                stroke-width="0.4"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+          <button class="xds:button xds:button-ghost xds:button-success xds:button-square">
+            <svg
+              viewBox="0 0 8 8"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="xds:size-12"
+            >
+              <path
+                d="M4 1.5V6.5M1.5 4H6.5"
+                stroke="currentColor"
+                stroke-width="0.4"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="xds:button-group xds:rounded-xl">
+        <button class="xds:button">BUTTON 1</button>
+        <button class="xds:button">BUTTON 2</button>
+        <button class="xds:button">BUTTON 3</button>
+      </div>
+    </template>
+  </Wrapper>
+</template>
+
+<script setup lang="ts">
+import Wrapper from './wrapper.vue'
+
+const rows = ['default', 'rounded']
+</script>
diff --git a/packages/x-design-system/lib/components/button-group.css b/packages/x-design-system/lib/components/button-group.css
new file mode 100644
index 0000000000..6487ea8f80
--- /dev/null
+++ b/packages/x-design-system/lib/components/button-group.css
@@ -0,0 +1,25 @@
+/* Base */
+@utility button-group {
+  @apply xds:inline-flex;
+  @apply xds:text-neutral-50;
+
+  /* We should only remove the left border if the button group doesn't have gap */
+  &:not([class*='gap']) > .xds\:button + .xds\:button {
+    @apply xds:border-l-0;
+  }
+
+  & > :not(.xds\:button-circle):first-child {
+    @apply xds:rounded-tl-[inherit] xds:rounded-bl-[inherit];
+  }
+
+  & > :not(.xds\:button-circle):last-child {
+    @apply xds:rounded-tr-[inherit] xds:rounded-br-[inherit];
+  }
+}
+
+/* Divider */
+@utility button-group-divider {
+  @apply xds:border-l-1 xds:border-l-inherit;
+  @apply xds:my-8;
+  @apply xds:self-stretch;
+}
diff --git a/packages/x-design-system/lib/components/index.css b/packages/x-design-system/lib/components/index.css
index 4e38413133..70d5e5a434 100644
--- a/packages/x-design-system/lib/components/index.css
+++ b/packages/x-design-system/lib/components/index.css
@@ -1,2 +1,3 @@
 @import './badge.css';
 @import './button.css';
+@import './button-group.css';