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..a16c1d1ec8
--- /dev/null
+++ b/packages/x-design-system/lib/components/button.css
@@ -0,0 +1,287 @@
+/* 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;` 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 {
+    @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;
+}
+
+/* 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;
+    }
+  }
+}
+
+/* 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;
+    }
+  }
+}
+
+/* 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;
+    }
+  }
+}
+
+/* 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;
+    }
+  }
+}
+
+/* Colors */
+@utility button-* {
+  background-color: --value(--color- * -50);
+  border-color: --value(--color- * -50);
+
+  &:hover,
+  &:active {
+    background-color: --value(--color- * -75);
+    border-color: --value(--color- * -75);
+  }
+
+  &.xds\:selected {
+    background-color: --value(--color- * -75);
+    border-color: --value(--color- * -75);
+
+    &:hover,
+    &:active {
+      background-color: --value(--color- * -50);
+      border-color: --value(--color- * -50);
+    }
+  }
+
+  &.xds\:button-outlined {
+    @apply xds:bg-transparent;
+    border-color: --value(--color- * -50);
+    color: --value(--color- * -50);
+
+    &:hover,
+    &:active {
+      @apply xds:text-neutral-0;
+      background-color: --value(--color- * -50);
+      border-color: --value(--color- * -50);
+    }
+
+    &.xds\:selected {
+      @apply xds:text-neutral-0;
+      background-color: --value(--color- * -50);
+      border-color: --value(--color- * -50);
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent;
+        border-color: --value(--color- * -50);
+        color: --value(--color- * -50);
+      }
+    }
+  }
+
+  &.xds\:button-ghost {
+    @apply xds:border-0 xds:bg-transparent;
+    color: --value(--color- * -50);
+
+    &:hover,
+    &:active {
+      @apply xds:bg-neutral-10 xds:border-neutral-10;
+      color: --value(--color- * -75);
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-neutral-10 xds:border-neutral-10;
+      color: --value(--color- * -75);
+
+      &:hover,
+      &:active {
+        @apply xds:bg-neutral-25 xds:border-neutral-25;
+        color: --value(--color- * -75);
+      }
+    }
+  }
+
+  &.xds\:button-tight {
+    @apply xds:border-0 xds:bg-transparent;
+    color: --value(--color- * -50);
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0;
+      color: --value(--color- * -75);
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0;
+      color: --value(--color- * -75);
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0;
+        color: --value(--color- * -50);
+      }
+    }
+  }
+
+  &.xds\:button-link {
+    @apply xds:border-0 xds:bg-transparent;
+    color: --value(--color- * -50);
+
+    &:hover,
+    &:active {
+      @apply xds:bg-transparent xds:border-0;
+      color: --value(--color- * -75);
+    }
+
+    &.xds\:selected {
+      @apply xds:bg-transparent xds:border-0;
+      color: --value(--color- * -75);
+
+      &:hover,
+      &:active {
+        @apply xds:bg-transparent xds:border-0;
+        color: --value(--color- * -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';