From 9aa019f5f0fa1bee40631de957d5462d0d03487b Mon Sep 17 00:00:00 2001
From: Francisco Diaz <franciscod@empathy.co>
Date: Thu, 19 Feb 2026 17:19:49 +0100
Subject: [PATCH 1/2] feat(x-design-system): button component

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

diff --git a/packages/x-design-system/demo/src/app.vue b/packages/x-design-system/demo/src/app.vue
index db94f0e417..dcef79d0a0 100644
--- a/packages/x-design-system/demo/src/app.vue
+++ b/packages/x-design-system/demo/src/app.vue
@@ -1,9 +1,11 @@
 <template>
   <Badge />
+  <Button />
   <Integration />
 </template>
 
 <script setup lang="ts">
 import Badge from './components/badge.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.vue b/packages/x-design-system/demo/src/components/button.vue
new file mode 100644
index 0000000000..7986fddc53
--- /dev/null
+++ b/packages/x-design-system/demo/src/components/button.vue
@@ -0,0 +1,189 @@
+<template>
+  <Wrapper feature="Button" :rows="rows">
+    <template #default>
+      <button class="xds:button">
+        <span>button</span>
+      </button>
+    </template>
+    <template #size>
+      <button class="xds:button xds:button-sm">sm badge</button>
+      <button class="xds:button xds:button-md">md badge</button>
+      <button class="xds:button xds:button-lg">lg badge</button>
+      <button class="xds:button xds:button-xl">xl badge</button>
+    </template>
+    <template #layout>
+      <button class="xds:button xds:button-circle">+</button>
+      <button class="xds:button xds:button-square">+</button>
+    </template>
+    <template #color>
+      <button class="xds:button">button</button>
+      <button v-for="(value, key) in colors" :key="key" class="xds:button" :class="value">
+        {{ key }} button
+      </button>
+    </template>
+    <template #default-selected>
+      <button class="xds:button xds:selected">selected button</button>
+      <button
+        v-for="(value, key) in colors"
+        :key="key"
+        class="xds:button xds:selected"
+        :class="value"
+      >
+        selected {{ key }} button
+      </button>
+    </template>
+    <template #outline>
+      <button class="xds:button xds:button-outlined">outlined button</button>
+      <button
+        v-for="(value, key) in colors"
+        :key="key"
+        class="xds:button xds:button-outlined"
+        :class="[value]"
+      >
+        outline {{ key }} button
+      </button>
+    </template>
+    <template #outline-selected>
+      <button class="xds:button xds:selected xds:button-outlined">selected outlined button</button>
+      <button
+        v-for="(value, key) in colors"
+        :key="key"
+        class="xds:button xds:selected xds:button-outlined"
+        :class="[value]"
+      >
+        selected outline {{ key }} button
+      </button>
+    </template>
+    <template #ghost>
+      <button class="xds:button xds:button-ghost">ghost button</button>
+      <button
+        v-for="(value, key) in colors"
+        :key="key"
+        class="xds:button xds:button-ghost"
+        :class="[value]"
+      >
+        ghost {{ key }} button
+      </button>
+    </template>
+    <template #ghost-selected>
+      <button class="xds:button xds:button-ghost xds:selected">selected ghost button</button>
+      <button
+        v-for="(value, key) in colors"
+        :key="key"
+        class="xds:button xds:button-ghost xds:selected"
+        :class="[value]"
+      >
+        selected ghost {{ key }} button
+      </button>
+    </template>
+    <template #tight>
+      <button class="xds:button xds:button-tight">tight button</button>
+      <button
+        v-for="(value, key) in colors"
+        :key="key"
+        class="xds:button xds:button-tight"
+        :class="[value]"
+      >
+        tight {{ key }} button
+      </button>
+    </template>
+    <template #tight-selected>
+      <button class="xds:button xds:button-tight xds:selected">selected tight button</button>
+      <button
+        v-for="(value, key) in colors"
+        :key="key"
+        class="xds:button xds:button-tight xds:selected"
+        :class="[value]"
+      >
+        selected tight {{ key }} button
+      </button>
+    </template>
+    <template #link>
+      <button class="xds:button xds:button-link xds:button-xl">link button</button>
+      <button
+        v-for="(value, key) in colors"
+        :key="key"
+        class="xds:button xds:button-link xds:button-xl"
+        :class="[value]"
+      >
+        link {{ key }} button
+      </button>
+    </template>
+    <template #link-selected>
+      <button class="xds:button xds:button-link xds:selected xds:button-xl">
+        selected link button
+      </button>
+      <button
+        v-for="(value, key) in colors"
+        :key="key"
+        class="xds:button xds:button-link xds:selected xds:button-xl"
+        :class="[value]"
+      >
+        selected link {{ key }} button
+      </button>
+    </template>
+    <template #disabled>
+      <button class="xds:button" disabled>button</button>
+      <button class="xds:button xds:selected" disabled>selected button</button>
+      <button class="xds:button xds:button-outlined" disabled>outlined button</button>
+      <button class="xds:button xds:selected xds:button-outlined" disabled>
+        selected outlined button
+      </button>
+      <button class="xds:button xds:button-ghost" disabled>ghost button</button>
+      <button class="xds:button xds:selected xds:button-ghost" disabled>
+        selected ghost button
+      </button>
+      <button class="xds:button xds:button-tight" disabled>tight button</button>
+      <button class="xds:button xds:selected xds:button-tight" disabled>
+        selected tight button
+      </button>
+      <button class="xds:button xds:button-link xds:button-xl" disabled>link button</button>
+      <button class="xds:button xds:selected xds:button-link xds:button-xl" disabled>
+        selected link button
+      </button>
+    </template>
+    <template #combinations>
+      <button class="xds:button xds:button-lead xds:button-sm">lead sm button</button>
+      <button class="xds:button xds:button-outlined xds:button-square xds:button-lg xds:selected">
+        +
+      </button>
+      <button class="xds:button xds:button-auxiliary xds:button-outlined xds:button-circle">
+        -
+      </button>
+      <button class="xds:button xds:button-accent xds:button-tight">accent tight button</button>
+      <button class="xds:button xds:button-warning xds:button-ghost">warning ghost button</button>
+    </template>
+  </Wrapper>
+</template>
+
+<script setup lang="ts">
+import Wrapper from './wrapper.vue'
+
+const rows = [
+  'default',
+  'size',
+  'layout',
+  'color',
+  'default-selected',
+  'outline',
+  'outline-selected',
+  'ghost',
+  'ghost-selected',
+  'tight',
+  'tight-selected',
+  'link',
+  'link-selected',
+  'disabled',
+  'combinations',
+]
+const colors = {
+  neutral: 'xds:button-neutral',
+  lead: 'xds:button-lead',
+  auxiliary: 'xds:button-auxiliary',
+  accent: 'xds:button-accent',
+  highlight: 'xds:button-highlight',
+  success: 'xds:button-success',
+  warning: 'xds:button-warning',
+  error: 'xds:button-error',
+}
+</script>
diff --git a/packages/x-design-system/lib/components/button.css b/packages/x-design-system/lib/components/button.css
new file mode 100644
index 0000000000..54060ac30a
--- /dev/null
+++ b/packages/x-design-system/lib/components/button.css
@@ -0,0 +1,889 @@
+/* Base */
+@utility button {
+  @apply xds:flex xds:justify-center xds:items-center xds:content-center xds:flex-row xds:flex-nowrap;
+  @apply xds:border-1 xds:border-solid xds:cursor-pointer;
+  @apply xds:font-family-main xds:font-bold;
+  @apply xds:text-neutral-0 xds:bg-neutral-90 xds:border-neutral-90;
+
+  @apply xds:button-md;
+
+  &:hover,
+  &:active {
+    @apply xds:bg-neutral-100 xds:border-neutral-100;
+  }
+
+  &.xds\:selected {
+    @apply xds:bg-neutral-100 xds:border-neutral-100;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-neutral-90 xds:border-neutral-90;
+    }
+  }
+
+  &:disabled {
+    @apply xds:border-neutral-10 xds:bg-neutral-10 xds:text-neutral-25 xds:cursor-not-allowed;
+
+    &:hover,
+    &:active {
+      @apply xds:border-neutral-10 xds:bg-neutral-10 xds:text-neutral-25 xds:cursor-not-allowed;
+    }
+  }
+}
+
+/* Sizes */
+@utility button-sm {
+  @apply xds:min-h-32 xds:gap-8 xds:ps-12 xds:pe-12 xds:text-sm;
+}
+@utility button-md {
+  @apply xds:min-h-40 xds:gap-8 xds:ps-16 xds:pe-16 xds:text-sm;
+}
+@utility button-lg {
+  @apply xds:min-h-48 xds:gap-8 xds:ps-20 xds:pe-20 xds:text-sm;
+}
+@utility button-xl {
+  @apply xds:min-h-56 xds:gap-8 xds:ps-24 xds:pe-24 xds:text-lg;
+}
+
+/* Layouts */
+@utility button-circle {
+  @apply xds:aspect-square xds:ps-0 xds:pe-0 xds:rounded-full;
+}
+@utility button-square {
+  @apply xds:aspect-square xds:ps-0 xds:pe-0;
+}
+
+/* Colors */
+@utility button-neutral {
+  @apply xds:bg-neutral-50 xds:border-neutral-50;
+
+  &:hover,
+  &:active {
+    @apply xds:bg-neutral-75 xds:border-neutral-75;
+  }
+
+  &.xds\:selected {
+    @apply xds:bg-neutral-75 xds:border-neutral-75;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-neutral-50 xds:border-neutral-50;
+    }
+  }
+}
+@utility button-lead {
+  @apply xds:bg-lead-50 xds:border-lead-50;
+
+  &:hover,
+  &:active {
+    @apply xds:bg-lead-75 xds:border-lead-75;
+  }
+
+  &.xds\:selected {
+    @apply xds:bg-lead-75 xds:border-lead-75;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-lead-50 xds:border-lead-50;
+    }
+  }
+}
+@utility button-auxiliary {
+  @apply xds:bg-auxiliary-50 xds:border-auxiliary-50;
+
+  &:hover,
+  &:active {
+    @apply xds:bg-auxiliary-75 xds:border-auxiliary-75;
+  }
+
+  &.xds\:selected {
+    @apply xds:bg-auxiliary-75 xds:border-auxiliary-75;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-auxiliary-50 xds:border-auxiliary-50;
+    }
+  }
+}
+@utility button-accent {
+  @apply xds:bg-accent-50 xds:border-accent-50;
+
+  &:hover,
+  &:active {
+    @apply xds:bg-accent-75 xds:border-accent-75;
+  }
+
+  &.xds\:selected {
+    @apply xds:bg-accent-75 xds:border-accent-75;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-accent-50 xds:border-accent-50;
+    }
+  }
+}
+@utility button-highlight {
+  @apply xds:bg-highlight-50 xds:border-highlight-50;
+
+  &:hover,
+  &:active {
+    @apply xds:bg-highlight-75 xds:border-highlight-75;
+  }
+
+  &.xds\:selected {
+    @apply xds:bg-highlight-75 xds:border-highlight-75;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-highlight-50 xds:border-highlight-50;
+    }
+  }
+}
+@utility button-success {
+  @apply xds:bg-success-50 xds:border-success-50;
+
+  &:hover,
+  &:active {
+    @apply xds:bg-success-75 xds:border-success-75;
+  }
+
+  &.xds\:selected {
+    @apply xds:bg-success-75 xds:border-success-75;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-success-50 xds:border-success-50;
+    }
+  }
+}
+@utility button-warning {
+  @apply xds:bg-warning-50 xds:border-warning-50;
+
+  &:hover,
+  &:active {
+    @apply xds:bg-warning-75 xds:border-warning-75;
+  }
+
+  &.xds\:selected {
+    @apply xds:bg-warning-75 xds:border-warning-75;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-warning-50 xds:border-warning-50;
+    }
+  }
+}
+@utility button-error {
+  @apply xds:bg-error-50 xds:border-error-50;
+
+  &:hover,
+  &:active {
+    @apply xds:bg-error-75 xds:border-error-75;
+  }
+
+  &.xds\:selected {
+    @apply xds:bg-error-75 xds:border-error-75;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-error-50 xds:border-error-50;
+    }
+  }
+}
+
+/* Outlined */
+@utility button-outlined {
+  @apply xds:text-neutral-90 xds:bg-transparent;
+  @apply xds:border-1 xds:border-neutral-90;
+
+  &:hover,
+  &:active {
+    @apply xds:bg-neutral-90 xds:border-neutral-90 xds:text-neutral-0;
+  }
+
+  &.xds\:selected {
+    @apply xds:bg-neutral-90 xds:border-neutral-90 xds:text-neutral-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-neutral-90 xds:text-neutral-90;
+    }
+  }
+
+  &:disabled {
+    @apply xds:border-neutral-25 xds:bg-neutral-10 xds:text-neutral-25 xds:cursor-not-allowed;
+
+    &:hover,
+    &:active {
+      @apply xds:border-neutral-25 xds:bg-neutral-10 xds:text-neutral-25 xds:cursor-not-allowed;
+    }
+  }
+
+  &.xds\:button-neutral {
+    @apply xds:bg-transparent;
+    @apply xds:border-neutral-50 xds:text-neutral-50;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-neutral-50 xds:border-neutral-50 xds:text-neutral-0;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-neutral-50 xds:border-neutral-50 xds:text-neutral-0;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-neutral-50 xds:text-neutral-50;
+      }
+    }
+  }
+  &.xds\:button-lead {
+    @apply xds:bg-transparent;
+    @apply xds:border-lead-50 xds:text-lead-50;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-lead-50 xds:border-lead-50 xds:text-neutral-0;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-lead-50 xds:border-lead-50 xds:text-neutral-0;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-lead-50 xds:text-lead-50;
+      }
+    }
+  }
+  &.xds\:button-auxiliary {
+    @apply xds:bg-transparent;
+    @apply xds:border-auxiliary-50 xds:text-auxiliary-50;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-auxiliary-50 xds:border-auxiliary-50 xds:text-neutral-0;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-auxiliary-50 xds:border-auxiliary-50 xds:text-neutral-0;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-auxiliary-50 xds:text-auxiliary-50;
+      }
+    }
+  }
+  &.xds\:button-accent {
+    @apply xds:bg-transparent;
+    @apply xds:border-accent-50 xds:text-accent-50;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-accent-50 xds:border-accent-50 xds:text-neutral-0;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-accent-50 xds:border-accent-50 xds:text-neutral-0;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-accent-50 xds:text-accent-50;
+      }
+    }
+  }
+  &.xds\:button-highlight {
+    @apply xds:bg-transparent;
+    @apply xds:border-highlight-50 xds:text-highlight-50;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-highlight-50 xds:border-highlight-50 xds:text-neutral-0;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-highlight-50 xds:border-highlight-50 xds:text-neutral-0;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-highlight-50 xds:text-highlight-50;
+      }
+    }
+  }
+  &.xds\:button-success {
+    @apply xds:bg-transparent;
+    @apply xds:border-success-50 xds:text-success-50;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-success-50 xds:border-success-50 xds:text-neutral-0;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-success-50 xds:border-success-50 xds:text-neutral-0;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-success-50 xds:text-success-50;
+      }
+    }
+  }
+  &.xds\:button-warning {
+    @apply xds:bg-transparent;
+    @apply xds:border-warning-50 xds:text-warning-50;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-warning-50 xds:border-warning-50 xds:text-neutral-0;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-warning-50 xds:border-warning-50 xds:text-neutral-0;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-warning-50 xds:text-warning-50;
+      }
+    }
+  }
+  &.xds\:button-error {
+    @apply xds:bg-transparent;
+    @apply xds:border-error-50 xds:text-error-50;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-error-50 xds:border-error-50 xds:text-neutral-0;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-error-50 xds:border-error-50 xds:text-neutral-0;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-error-50 xds:text-error-50;
+      }
+    }
+  }
+}
+
+/* Ghost */
+@utility button-ghost {
+  @apply xds:text-neutral-90 xds:bg-transparent;
+  @apply xds:border-0;
+
+  &:hover,
+  &:active {
+    @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-neutral-90;
+  }
+
+  &.xds\:selected {
+    @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-neutral-90;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-neutral-90;
+    }
+  }
+
+  &:disabled {
+    @apply xds:bg-transparent xds:border-0 xds:text-neutral-25 xds:cursor-not-allowed;
+
+    &:hover,
+    &:active {
+      @apply xds:border-0 xds:bg-transparent xds:text-neutral-25 xds:cursor-not-allowed;
+    }
+  }
+
+  &.xds\:button-neutral {
+    @apply xds:text-neutral-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-neutral-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-neutral-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-neutral-75;
+      }
+    }
+  }
+  &.xds\:button-lead {
+    @apply xds:text-lead-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-lead-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-lead-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-lead-75;
+      }
+    }
+  }
+  &.xds\:button-auxiliary {
+    @apply xds:text-auxiliary-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-auxiliary-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-auxiliary-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-auxiliary-75;
+      }
+    }
+  }
+  &.xds\:button-accent {
+    @apply xds:text-accent-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-accent-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-accent-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-accent-75;
+      }
+    }
+  }
+  &.xds\:button-highlight {
+    @apply xds:text-highlight-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-highlight-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-highlight-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-highlight-75;
+      }
+    }
+  }
+  &.xds\:button-success {
+    @apply xds:text-success-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-success-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-success-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-success-75;
+      }
+    }
+  }
+  &.xds\:button-warning {
+    @apply xds:text-warning-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-warning-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-warning-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-warning-75;
+      }
+    }
+  }
+  &.xds\:button-error {
+    @apply xds:text-error-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-error-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-error-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-error-75;
+      }
+    }
+  }
+}
+
+/* Tight */
+@utility button-tight {
+  @apply xds:text-neutral-75 xds:bg-transparent;
+  @apply xds:border-0;
+
+  &:hover,
+  &:active {
+    @apply xds:bg-transparent xds:border-0 xds:text-neutral-90;
+  }
+
+  &.xds\:selected {
+    @apply xds:bg-transparent xds:border-0 xds:text-neutral-90;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-neutral-75;
+    }
+  }
+
+  &:disabled {
+    @apply xds:bg-transparent xds:border-0 xds:text-neutral-25 xds:cursor-not-allowed;
+
+    &:hover,
+    &:active {
+      @apply xds:border-0 xds:bg-transparent xds:text-neutral-25 xds:cursor-not-allowed;
+    }
+  }
+
+  &.xds\:button-neutral {
+    @apply xds:text-neutral-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-neutral-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0 xds:text-neutral-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0 xds:text-neutral-50;
+      }
+    }
+  }
+  &.xds\:button-lead {
+    @apply xds:text-lead-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-lead-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0 xds:text-lead-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0 xds:text-lead-75;
+      }
+    }
+  }
+  &.xds\:button-auxiliary {
+    @apply xds:text-auxiliary-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-auxiliary-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0 xds:text-auxiliary-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0 xds:text-auxiliary-50;
+      }
+    }
+  }
+  &.xds\:button-accent {
+    @apply xds:text-accent-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-accent-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0 xds:text-accent-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0 xds:text-accent-50;
+      }
+    }
+  }
+  &.xds\:button-highlight {
+    @apply xds:text-highlight-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-highlight-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0 xds:text-highlight-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0 xds:text-highlight-50;
+      }
+    }
+  }
+  &.xds\:button-success {
+    @apply xds:text-success-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-success-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0 xds:text-success-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0 xds:text-success-50;
+      }
+    }
+  }
+  &.xds\:button-warning {
+    @apply xds:text-warning-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-warning-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0 xds:text-warning-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0 xds:text-warning-50;
+      }
+    }
+  }
+  &.xds\:button-error {
+    @apply xds:text-error-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-error-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0 xds:text-error-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0 xds:text-error-50;
+      }
+    }
+  }
+}
+
+/* Link */
+@utility button-link {
+  @apply xds:min-h-0 xds:ps-0 xds:pe-0;
+  @apply xds:border-0 xds:underline xds:font-normal;
+  @apply xds:text-neutral-75 xds:bg-transparent;
+
+  &:hover,
+  &:active {
+    @apply xds:bg-transparent xds:border-0 xds:text-neutral-90;
+  }
+
+  &.xds\:selected {
+    @apply xds:bg-transparent xds:border-0 xds:text-neutral-100;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-neutral-90;
+    }
+  }
+
+  &:disabled {
+    @apply xds:bg-transparent xds:border-0 xds:text-neutral-25 xds:cursor-not-allowed;
+
+    &:hover,
+    &:active {
+      @apply xds:border-0 xds:bg-transparent xds:text-neutral-25 xds:cursor-not-allowed;
+    }
+  }
+
+  &.xds\:button-neutral {
+    @apply xds:text-neutral-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-neutral-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0 xds:text-neutral-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0 xds:text-neutral-50;
+      }
+    }
+  }
+  &.xds\:button-lead {
+    @apply xds:text-lead-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-lead-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0 xds:text-lead-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0 xds:text-lead-75;
+      }
+    }
+  }
+  &.xds\:button-auxiliary {
+    @apply xds:text-auxiliary-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-auxiliary-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0 xds:text-auxiliary-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0 xds:text-auxiliary-50;
+      }
+    }
+  }
+  &.xds\:button-accent {
+    @apply xds:text-accent-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-accent-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0 xds:text-accent-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0 xds:text-accent-50;
+      }
+    }
+  }
+  &.xds\:button-highlight {
+    @apply xds:text-highlight-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-highlight-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0 xds:text-highlight-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0 xds:text-highlight-50;
+      }
+    }
+  }
+  &.xds\:button-success {
+    @apply xds:text-success-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-success-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0 xds:text-success-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0 xds:text-success-50;
+      }
+    }
+  }
+  &.xds\:button-warning {
+    @apply xds:text-warning-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-warning-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0 xds:text-warning-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0 xds:text-warning-50;
+      }
+    }
+  }
+  &.xds\:button-error {
+    @apply xds:text-error-50 xds:bg-transparent;
+    @apply xds:border-0;
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0 xds:text-error-75;
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0 xds:text-error-75;
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0 xds:text-error-50;
+      }
+    }
+  }
+}
diff --git a/packages/x-design-system/lib/components/index.css b/packages/x-design-system/lib/components/index.css
index 27c70becb9..4e38413133 100644
--- a/packages/x-design-system/lib/components/index.css
+++ b/packages/x-design-system/lib/components/index.css
@@ -1 +1,2 @@
 @import './badge.css';
+@import './button.css';

From 120c592896e615133fe7771c8fce4d52d5cdfe1e Mon Sep 17 00:00:00 2001
From: Francisco Diaz <franciscod@empathy.co>
Date: Fri, 20 Feb 2026 12:20:08 +0100
Subject: [PATCH 2/2] feat(x-design-system): button component

---
 .../x-design-system/lib/components/button.css | 720 ++----------------
 1 file changed, 59 insertions(+), 661 deletions(-)

diff --git a/packages/x-design-system/lib/components/button.css b/packages/x-design-system/lib/components/button.css
index 54060ac30a..a16c1d1ec8 100644
--- a/packages/x-design-system/lib/components/button.css
+++ b/packages/x-design-system/lib/components/button.css
@@ -5,7 +5,8 @@
   @apply xds:font-family-main xds:font-bold;
   @apply xds:text-neutral-0 xds:bg-neutral-90 xds:border-neutral-90;
 
-  @apply xds:button-md;
+  /* `@apply xds:button-md;` can not be use here because cause circular dependency. */
+  @apply xds:min-h-40 xds:gap-8 xds:ps-16 xds:pe-16 xds:text-sm;
 
   &:hover,
   &:active {
@@ -53,144 +54,6 @@
   @apply xds:aspect-square xds:ps-0 xds:pe-0;
 }
 
-/* Colors */
-@utility button-neutral {
-  @apply xds:bg-neutral-50 xds:border-neutral-50;
-
-  &:hover,
-  &:active {
-    @apply xds:bg-neutral-75 xds:border-neutral-75;
-  }
-
-  &.xds\:selected {
-    @apply xds:bg-neutral-75 xds:border-neutral-75;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-neutral-50 xds:border-neutral-50;
-    }
-  }
-}
-@utility button-lead {
-  @apply xds:bg-lead-50 xds:border-lead-50;
-
-  &:hover,
-  &:active {
-    @apply xds:bg-lead-75 xds:border-lead-75;
-  }
-
-  &.xds\:selected {
-    @apply xds:bg-lead-75 xds:border-lead-75;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-lead-50 xds:border-lead-50;
-    }
-  }
-}
-@utility button-auxiliary {
-  @apply xds:bg-auxiliary-50 xds:border-auxiliary-50;
-
-  &:hover,
-  &:active {
-    @apply xds:bg-auxiliary-75 xds:border-auxiliary-75;
-  }
-
-  &.xds\:selected {
-    @apply xds:bg-auxiliary-75 xds:border-auxiliary-75;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-auxiliary-50 xds:border-auxiliary-50;
-    }
-  }
-}
-@utility button-accent {
-  @apply xds:bg-accent-50 xds:border-accent-50;
-
-  &:hover,
-  &:active {
-    @apply xds:bg-accent-75 xds:border-accent-75;
-  }
-
-  &.xds\:selected {
-    @apply xds:bg-accent-75 xds:border-accent-75;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-accent-50 xds:border-accent-50;
-    }
-  }
-}
-@utility button-highlight {
-  @apply xds:bg-highlight-50 xds:border-highlight-50;
-
-  &:hover,
-  &:active {
-    @apply xds:bg-highlight-75 xds:border-highlight-75;
-  }
-
-  &.xds\:selected {
-    @apply xds:bg-highlight-75 xds:border-highlight-75;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-highlight-50 xds:border-highlight-50;
-    }
-  }
-}
-@utility button-success {
-  @apply xds:bg-success-50 xds:border-success-50;
-
-  &:hover,
-  &:active {
-    @apply xds:bg-success-75 xds:border-success-75;
-  }
-
-  &.xds\:selected {
-    @apply xds:bg-success-75 xds:border-success-75;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-success-50 xds:border-success-50;
-    }
-  }
-}
-@utility button-warning {
-  @apply xds:bg-warning-50 xds:border-warning-50;
-
-  &:hover,
-  &:active {
-    @apply xds:bg-warning-75 xds:border-warning-75;
-  }
-
-  &.xds\:selected {
-    @apply xds:bg-warning-75 xds:border-warning-75;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-warning-50 xds:border-warning-50;
-    }
-  }
-}
-@utility button-error {
-  @apply xds:bg-error-50 xds:border-error-50;
-
-  &:hover,
-  &:active {
-    @apply xds:bg-error-75 xds:border-error-75;
-  }
-
-  &.xds\:selected {
-    @apply xds:bg-error-75 xds:border-error-75;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-error-50 xds:border-error-50;
-    }
-  }
-}
-
 /* Outlined */
 @utility button-outlined {
   @apply xds:text-neutral-90 xds:bg-transparent;
@@ -218,151 +81,6 @@
       @apply xds:border-neutral-25 xds:bg-neutral-10 xds:text-neutral-25 xds:cursor-not-allowed;
     }
   }
-
-  &.xds\:button-neutral {
-    @apply xds:bg-transparent;
-    @apply xds:border-neutral-50 xds:text-neutral-50;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-neutral-50 xds:border-neutral-50 xds:text-neutral-0;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-neutral-50 xds:border-neutral-50 xds:text-neutral-0;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-neutral-50 xds:text-neutral-50;
-      }
-    }
-  }
-  &.xds\:button-lead {
-    @apply xds:bg-transparent;
-    @apply xds:border-lead-50 xds:text-lead-50;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-lead-50 xds:border-lead-50 xds:text-neutral-0;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-lead-50 xds:border-lead-50 xds:text-neutral-0;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-lead-50 xds:text-lead-50;
-      }
-    }
-  }
-  &.xds\:button-auxiliary {
-    @apply xds:bg-transparent;
-    @apply xds:border-auxiliary-50 xds:text-auxiliary-50;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-auxiliary-50 xds:border-auxiliary-50 xds:text-neutral-0;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-auxiliary-50 xds:border-auxiliary-50 xds:text-neutral-0;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-auxiliary-50 xds:text-auxiliary-50;
-      }
-    }
-  }
-  &.xds\:button-accent {
-    @apply xds:bg-transparent;
-    @apply xds:border-accent-50 xds:text-accent-50;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-accent-50 xds:border-accent-50 xds:text-neutral-0;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-accent-50 xds:border-accent-50 xds:text-neutral-0;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-accent-50 xds:text-accent-50;
-      }
-    }
-  }
-  &.xds\:button-highlight {
-    @apply xds:bg-transparent;
-    @apply xds:border-highlight-50 xds:text-highlight-50;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-highlight-50 xds:border-highlight-50 xds:text-neutral-0;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-highlight-50 xds:border-highlight-50 xds:text-neutral-0;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-highlight-50 xds:text-highlight-50;
-      }
-    }
-  }
-  &.xds\:button-success {
-    @apply xds:bg-transparent;
-    @apply xds:border-success-50 xds:text-success-50;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-success-50 xds:border-success-50 xds:text-neutral-0;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-success-50 xds:border-success-50 xds:text-neutral-0;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-success-50 xds:text-success-50;
-      }
-    }
-  }
-  &.xds\:button-warning {
-    @apply xds:bg-transparent;
-    @apply xds:border-warning-50 xds:text-warning-50;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-warning-50 xds:border-warning-50 xds:text-neutral-0;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-warning-50 xds:border-warning-50 xds:text-neutral-0;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-warning-50 xds:text-warning-50;
-      }
-    }
-  }
-  &.xds\:button-error {
-    @apply xds:bg-transparent;
-    @apply xds:border-error-50 xds:text-error-50;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-error-50 xds:border-error-50 xds:text-neutral-0;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-error-50 xds:border-error-50 xds:text-neutral-0;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-error-50 xds:text-error-50;
-      }
-    }
-  }
 }
 
 /* Ghost */
@@ -392,151 +110,6 @@
       @apply xds:border-0 xds:bg-transparent xds:text-neutral-25 xds:cursor-not-allowed;
     }
   }
-
-  &.xds\:button-neutral {
-    @apply xds:text-neutral-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-neutral-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-neutral-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-neutral-75;
-      }
-    }
-  }
-  &.xds\:button-lead {
-    @apply xds:text-lead-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-lead-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-lead-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-lead-75;
-      }
-    }
-  }
-  &.xds\:button-auxiliary {
-    @apply xds:text-auxiliary-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-auxiliary-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-auxiliary-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-auxiliary-75;
-      }
-    }
-  }
-  &.xds\:button-accent {
-    @apply xds:text-accent-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-accent-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-accent-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-accent-75;
-      }
-    }
-  }
-  &.xds\:button-highlight {
-    @apply xds:text-highlight-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-highlight-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-highlight-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-highlight-75;
-      }
-    }
-  }
-  &.xds\:button-success {
-    @apply xds:text-success-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-success-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-success-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-success-75;
-      }
-    }
-  }
-  &.xds\:button-warning {
-    @apply xds:text-warning-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-warning-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-warning-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-warning-75;
-      }
-    }
-  }
-  &.xds\:button-error {
-    @apply xds:text-error-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-error-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-neutral-10 xds:border-neutral-10 xds:text-error-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-neutral-25 xds:border-neutral-25 xds:text-error-75;
-      }
-    }
-  }
 }
 
 /* Tight */
@@ -566,151 +139,6 @@
       @apply xds:border-0 xds:bg-transparent xds:text-neutral-25 xds:cursor-not-allowed;
     }
   }
-
-  &.xds\:button-neutral {
-    @apply xds:text-neutral-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-transparent xds:border-0 xds:text-neutral-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-transparent xds:border-0 xds:text-neutral-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-0 xds:text-neutral-50;
-      }
-    }
-  }
-  &.xds\:button-lead {
-    @apply xds:text-lead-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-transparent xds:border-0 xds:text-lead-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-transparent xds:border-0 xds:text-lead-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-0 xds:text-lead-75;
-      }
-    }
-  }
-  &.xds\:button-auxiliary {
-    @apply xds:text-auxiliary-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-transparent xds:border-0 xds:text-auxiliary-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-transparent xds:border-0 xds:text-auxiliary-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-0 xds:text-auxiliary-50;
-      }
-    }
-  }
-  &.xds\:button-accent {
-    @apply xds:text-accent-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-transparent xds:border-0 xds:text-accent-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-transparent xds:border-0 xds:text-accent-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-0 xds:text-accent-50;
-      }
-    }
-  }
-  &.xds\:button-highlight {
-    @apply xds:text-highlight-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-transparent xds:border-0 xds:text-highlight-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-transparent xds:border-0 xds:text-highlight-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-0 xds:text-highlight-50;
-      }
-    }
-  }
-  &.xds\:button-success {
-    @apply xds:text-success-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-transparent xds:border-0 xds:text-success-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-transparent xds:border-0 xds:text-success-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-0 xds:text-success-50;
-      }
-    }
-  }
-  &.xds\:button-warning {
-    @apply xds:text-warning-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-transparent xds:border-0 xds:text-warning-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-transparent xds:border-0 xds:text-warning-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-0 xds:text-warning-50;
-      }
-    }
-  }
-  &.xds\:button-error {
-    @apply xds:text-error-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-transparent xds:border-0 xds:text-error-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-transparent xds:border-0 xds:text-error-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-0 xds:text-error-50;
-      }
-    }
-  }
 }
 
 /* Link */
@@ -741,148 +169,118 @@
       @apply xds:border-0 xds:bg-transparent xds:text-neutral-25 xds:cursor-not-allowed;
     }
   }
+}
 
-  &.xds\:button-neutral {
-    @apply xds:text-neutral-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-transparent xds:border-0 xds:text-neutral-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-transparent xds:border-0 xds:text-neutral-75;
+/* Colors */
+@utility button-* {
+  background-color: --value(--color- * -50);
+  border-color: --value(--color- * -50);
 
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-0 xds:text-neutral-50;
-      }
-    }
+  &:hover,
+  &:active {
+    background-color: --value(--color- * -75);
+    border-color: --value(--color- * -75);
   }
-  &.xds\:button-lead {
-    @apply xds:text-lead-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-transparent xds:border-0 xds:text-lead-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-transparent xds:border-0 xds:text-lead-75;
 
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-0 xds:text-lead-75;
-      }
-    }
-  }
-  &.xds\:button-auxiliary {
-    @apply xds:text-auxiliary-50 xds:bg-transparent;
-    @apply xds:border-0;
+  &.xds\:selected {
+    background-color: --value(--color- * -75);
+    border-color: --value(--color- * -75);
 
     &:hover,
     &:active {
-      @apply xds:bg-transparent xds:border-0 xds:text-auxiliary-75;
-    }
-
-    &.xds\:selected {
-      @apply xds:bg-transparent xds:border-0 xds:text-auxiliary-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-0 xds:text-auxiliary-50;
-      }
+      background-color: --value(--color- * -50);
+      border-color: --value(--color- * -50);
     }
   }
-  &.xds\:button-accent {
-    @apply xds:text-accent-50 xds:bg-transparent;
-    @apply xds:border-0;
-
-    &:hover,
-    &:active {
-      @apply xds:bg-transparent xds:border-0 xds:text-accent-75;
-    }
 
-    &.xds\:selected {
-      @apply xds:bg-transparent xds:border-0 xds:text-accent-75;
-
-      &:hover,
-      &:active {
-        @apply xds:bg-transparent xds:border-0 xds:text-accent-50;
-      }
-    }
-  }
-  &.xds\:button-highlight {
-    @apply xds:text-highlight-50 xds:bg-transparent;
-    @apply xds:border-0;
+  &.xds\:button-outlined {
+    @apply xds:bg-transparent;
+    border-color: --value(--color- * -50);
+    color: --value(--color- * -50);
 
     &:hover,
     &:active {
-      @apply xds:bg-transparent xds:border-0 xds:text-highlight-75;
+      @apply xds:text-neutral-0;
+      background-color: --value(--color- * -50);
+      border-color: --value(--color- * -50);
     }
 
     &.xds\:selected {
-      @apply xds:bg-transparent xds:border-0 xds:text-highlight-75;
+      @apply xds:text-neutral-0;
+      background-color: --value(--color- * -50);
+      border-color: --value(--color- * -50);
 
       &:hover,
       &:active {
-        @apply xds:bg-transparent xds:border-0 xds:text-highlight-50;
+        @apply xds:bg-transparent;
+        border-color: --value(--color- * -50);
+        color: --value(--color- * -50);
       }
     }
   }
-  &.xds\:button-success {
-    @apply xds:text-success-50 xds:bg-transparent;
-    @apply xds:border-0;
+
+  &.xds\:button-ghost {
+    @apply xds:border-0 xds:bg-transparent;
+    color: --value(--color- * -50);
 
     &:hover,
     &:active {
-      @apply xds:bg-transparent xds:border-0 xds:text-success-75;
+      @apply xds:bg-neutral-10 xds:border-neutral-10;
+      color: --value(--color- * -75);
     }
 
     &.xds\:selected {
-      @apply xds:bg-transparent xds:border-0 xds:text-success-75;
+      @apply xds:bg-neutral-10 xds:border-neutral-10;
+      color: --value(--color- * -75);
 
       &:hover,
       &:active {
-        @apply xds:bg-transparent xds:border-0 xds:text-success-50;
+        @apply xds:bg-neutral-25 xds:border-neutral-25;
+        color: --value(--color- * -75);
       }
     }
   }
-  &.xds\:button-warning {
-    @apply xds:text-warning-50 xds:bg-transparent;
-    @apply xds:border-0;
+
+  &.xds\:button-tight {
+    @apply xds:border-0 xds:bg-transparent;
+    color: --value(--color- * -50);
 
     &:hover,
     &:active {
-      @apply xds:bg-transparent xds:border-0 xds:text-warning-75;
+      @apply xds:bg-transparent xds:border-0;
+      color: --value(--color- * -75);
     }
 
     &.xds\:selected {
-      @apply xds:bg-transparent xds:border-0 xds:text-warning-75;
+      @apply xds:bg-transparent xds:border-0;
+      color: --value(--color- * -75);
 
       &:hover,
       &:active {
-        @apply xds:bg-transparent xds:border-0 xds:text-warning-50;
+        @apply xds:bg-transparent xds:border-0;
+        color: --value(--color- * -50);
       }
     }
   }
-  &.xds\:button-error {
-    @apply xds:text-error-50 xds:bg-transparent;
-    @apply xds:border-0;
+
+  &.xds\:button-link {
+    @apply xds:border-0 xds:bg-transparent;
+    color: --value(--color- * -50);
 
     &:hover,
     &:active {
-      @apply xds:bg-transparent xds:border-0 xds:text-error-75;
+      @apply xds:bg-transparent xds:border-0;
+      color: --value(--color- * -75);
     }
 
     &.xds\:selected {
-      @apply xds:bg-transparent xds:border-0 xds:text-error-75;
+      @apply xds:bg-transparent xds:border-0;
+      color: --value(--color- * -75);
 
       &:hover,
       &:active {
-        @apply xds:bg-transparent xds:border-0 xds:text-error-50;
+        @apply xds:bg-transparent xds:border-0;
+        color: --value(--color- * -50);
       }
     }
   }