diff --git a/.changeset/short-rivers-hammer.md b/.changeset/short-rivers-hammer.md
new file mode 100644
index 000000000..23adec717
--- /dev/null
+++ b/.changeset/short-rivers-hammer.md
@@ -0,0 +1,7 @@
+---
+'@cypress-design/constants-button': minor
+'@cypress-design/react-button': minor
+'@cypress-design/vue-button': minor
+---
+
+Adding purple-dark-mode button
diff --git a/components/Button/constants/src/index.ts b/components/Button/constants/src/index.ts
index 40df31b0b..5511a8f65 100644
--- a/components/Button/constants/src/index.ts
+++ b/components/Button/constants/src/index.ts
@@ -68,9 +68,11 @@ export const CssVariantClassesTable = {
   'outline-dark':
     'text-white border-white/20 hocus:border-white/60 disabled:hocus:shadow-none hocus:shadow-white/20 disabled:text-gray-700 disabled:hocus:border-white/20 disabled:border-white/20 focus:ring-gray-200',
   'indigo-dark-mode':
-    'text-white bg-indigo-500 border-indigo-500 disabled:hocus:shadow-none disabled:bg-gray-1000 disabled:text-gray-800 disabled:border-none disabled:mix-blend-screen hocus:shadow-indigo-400/40 focus:bg-indigo-600 focus:border-indigo-600 focus:ring-transparent',
+    'text-white bg-indigo-500 border-indigo-500 hocus:shadow-indigo-400/40 focus:border-indigo-400 focus-visible:border-indigo-300 focus:ring-indigo-300 disabled:hocus:shadow-none disabled:bg-gray-1000 disabled:text-gray-800 disabled:mix-blend-screen disabled:border-none',
   'red-dark-mode':
-    'text-white bg-red-500 border-red-500 disabled:hocus:shadow-none disabled:bg-gray-1000 disabled:text-gray-800 disabled:border-none hocus:shadow-red-400/40 disabled:mix-blend-screen focus:bg-red-600 focus:border-red-600 focus:ring-transparent',
+    'text-white bg-red-500 border-red-500 hocus:shadow-red-400/40 focus:border-red-400 focus-visible:border-red-300 focus:ring-red-300 disabled:hocus:shadow-none disabled:bg-gray-1000 disabled:text-gray-800 disabled:mix-blend-screen disabled:border-none',
+  'purple-dark-mode':
+    'text-white bg-purple-500 border-purple-500 hocus:shadow-purple-400/40 focus:border-purple-400 focus-visible:border-purple-300 focus:ring-purple-300 disabled:hocus:shadow-none disabled:bg-gray-1000 disabled:text-gray-800 disabled:mix-blend-screen disabled:border-none',
 } as const
 
 export const DefaultVariant: keyof typeof CssVariantClassesTable = 'indigo-dark'
diff --git a/components/Button/react/Button.rootstory.tsx b/components/Button/react/Button.rootstory.tsx
index 56279a0d7..e8155c096 100644
--- a/components/Button/react/Button.rootstory.tsx
+++ b/components/Button/react/Button.rootstory.tsx
@@ -4,6 +4,18 @@ import Button from './Button'
 import { CssSizeClassesTable, CssVariantClassesTable } from '../constants'
 import type { ButtonSizes, ButtonVariants } from '../constants'
 
+const darkModeVariants: ButtonVariants[] = [
+  'outline-dark',
+  'outline-red-dark-mode',
+  'outline-jade-dark-mode',
+  'outline-indigo-dark-mode',
+  'outline-purple-dark-mode',
+  'red-dark-mode',
+  'purple-dark-mode',
+  'indigo-dark-mode',
+  'disabled-dark-mode',
+]
+
 export default ({
   disabled = false,
   href,
@@ -18,15 +30,7 @@ export default ({
             className={clsx(
               'flex flex-col items-center gap-3 justify-center mt-4 p-2',
               {
-                'bg-gray-1000 text-white':
-                  variant === 'outline-dark' ||
-                  variant === 'outline-red-dark-mode' ||
-                  variant === 'outline-jade-dark-mode' ||
-                  variant === 'outline-indigo-dark-mode' ||
-                  variant === 'outline-purple-dark-mode' ||
-                  variant === 'red-dark-mode' ||
-                  variant === 'indigo-dark-mode' ||
-                  variant === 'disabled-dark-mode',
+                'bg-gray-1000 text-white': darkModeVariants.includes(variant),
               },
             )}
           >
@@ -39,14 +43,7 @@ export default ({
                     <span
                       className={clsx(
                         'text-sm mr-4',
-                        variant === 'outline-dark' ||
-                          variant === 'outline-red-dark-mode' ||
-                          variant === 'outline-jade-dark-mode' ||
-                          variant === 'outline-indigo-dark-mode' ||
-                          variant === 'outline-purple-dark-mode' ||
-                          variant === 'red-dark-mode' ||
-                          variant === 'indigo-dark-mode' ||
-                          variant === 'disabled-dark-mode'
+                        darkModeVariants.includes(variant)
                           ? 'text-gray-300'
                           : 'text-gray-900',
                       )}
diff --git a/components/Button/react/ReadMe.md b/components/Button/react/ReadMe.md
index 0095b9d53..a906c2514 100644
--- a/components/Button/react/ReadMe.md
+++ b/components/Button/react/ReadMe.md
@@ -61,6 +61,18 @@ import {
 } from '@cypress-design/react-button'
 
 export default () => {
+  const darkModeVariants = [
+    'outline-dark',
+    'outline-red-dark-mode',
+    'outline-jade-dark-mode',
+    'outline-indigo-dark-mode',
+    'outline-purple-dark-mode',
+    'red-dark-mode',
+    'purple-dark-mode',
+    'indigo-dark-mode',
+    'disabled-dark-mode',
+  ]
+
   return (
     <div className="flex flex-wrap justify-stretch gap-[8px]">
       {Object.keys(VariantClassesTable).map((variant) => (
@@ -68,28 +80,10 @@ export default () => {
           key={variant}
           className="px-[8px] py-[12px] flex flex-col items-center gap-[16px] rounded min-w-[180px]"
           style={{
-            backgroundColor:
-              variant === 'outline-dark' ||
-              variant === 'outline-red-dark-mode' ||
-              variant === 'outline-jade-dark-mode' ||
-              variant === 'outline-indigo-dark-mode' ||
-              variant === 'outline-purple-dark-mode' ||
-              variant === 'red-dark-mode' ||
-              variant === 'indigo-dark-mode' ||
-              variant === 'disabled-dark-mode'
-                ? '#1a202c'
-                : 'white',
-            color:
-              variant === 'outline-dark' ||
-              variant === 'outline-red-dark-mode' ||
-              variant === 'outline-jade-dark-mode' ||
-              variant === 'outline-indigo-dark-mode' ||
-              variant === 'outline-purple-dark-mode' ||
-              variant === 'red-dark-mode' ||
-              variant === 'indigo-dark-mode' ||
-              variant === 'disabled-dark-mode'
-                ? 'white'
-                : 'black',
+            backgroundColor: darkModeVariants.includes(variant)
+              ? '#1a202c'
+              : 'white',
+            color: darkModeVariants.includes(variant) ? 'white' : 'black',
           }}
         >
           {variant}
diff --git a/components/Button/vue/Button.rootstory.tsx b/components/Button/vue/Button.rootstory.tsx
index ffb6bffb2..402eca968 100644
--- a/components/Button/vue/Button.rootstory.tsx
+++ b/components/Button/vue/Button.rootstory.tsx
@@ -3,6 +3,18 @@ import Button from './Button.vue'
 import type { ButtonSizes, ButtonVariants } from '../constants'
 import { CssSizeClassesTable, CssVariantClassesTable } from '../constants'
 
+const darkModeVariants: ButtonVariants[] = [
+  'outline-dark',
+  'outline-red-dark-mode',
+  'outline-jade-dark-mode',
+  'outline-indigo-dark-mode',
+  'outline-purple-dark-mode',
+  'red-dark-mode',
+  'purple-dark-mode',
+  'indigo-dark-mode',
+  'disabled-dark-mode',
+]
+
 export default ({
   disabled = false,
   href,
@@ -15,15 +27,7 @@ export default ({
             class={clsx(
               'flex flex-col items-center gap-3 justify-center mt-4 p-2',
               {
-                'bg-gray-1000 text-white':
-                  variant === 'outline-dark' ||
-                  variant === 'outline-red-dark-mode' ||
-                  variant === 'outline-jade-dark-mode' ||
-                  variant === 'outline-indigo-dark-mode' ||
-                  variant === 'outline-purple-dark-mode' ||
-                  variant === 'red-dark-mode' ||
-                  variant === 'indigo-dark-mode' ||
-                  variant === 'disabled-dark-mode',
+                'bg-gray-1000 text-white': darkModeVariants.includes(variant),
               },
             )}
           >
@@ -35,25 +39,8 @@ export default ({
                   <div class="flex items-center justify-center">
                     <span
                       class={clsx('text-sm mr-4', {
-                        'text-gray-300':
-                          variant === 'outline-dark' ||
-                          variant === 'outline-red-dark-mode' ||
-                          variant === 'outline-jade-dark-mode' ||
-                          variant === 'outline-indigo-dark-mode' ||
-                          variant === 'outline-purple-dark-mode' ||
-                          variant === 'red-dark-mode' ||
-                          variant === 'indigo-dark-mode' ||
-                          variant === 'disabled-dark-mode',
-                        'text-gray-700': ![
-                          'outline-dark',
-                          'outline-red-dark-mode',
-                          'outline-jade-dark-mode',
-                          'outline-indigo-dark-mode',
-                          'outline-purple-dark-mode',
-                          'red-dark-mode',
-                          'indigo-dark-mode',
-                          'disabled-dark-mode',
-                        ].includes(variant),
+                        'text-gray-300': darkModeVariants.includes(variant),
+                        'text-gray-700': !darkModeVariants.includes(variant),
                       })}
                     >
                       {size}
diff --git a/components/Button/vue/ReadMe.md b/components/Button/vue/ReadMe.md
index 65db2812b..e6e90e35f 100644
--- a/components/Button/vue/ReadMe.md
+++ b/components/Button/vue/ReadMe.md
@@ -63,6 +63,18 @@ import {
   VariantClassesTable,
   SizeClassesTable,
 } from '@cypress-design/vue-button'
+
+const darkVariants = [
+  'outline-dark',
+  'outline-red-dark-mode',
+  'outline-jade-dark-mode',
+  'outline-indigo-dark-mode',
+  'outline-purple-dark-mode',
+  'red-dark-mode',
+  'purple-dark-mode',
+  'indigo-dark-mode',
+  'disabled-dark-mode',
+]
 </script>
 
 <template>
@@ -71,25 +83,8 @@ import {
       v-for="(_, variant) in VariantClassesTable"
       class="p-[8px] py-[12px] flex flex-col items-center gap-[16px] rounded min-w-[180px]"
       :class="{
-        'bg-gray-1000 text-white':
-          variant === 'outline-dark' ||
-          variant === 'outline-red-dark-mode' ||
-          variant === 'outline-jade-dark-mode' ||
-          variant === 'outline-indigo-dark-mode' ||
-          variant === 'outline-purple-dark-mode' ||
-          variant === 'red-dark-mode' ||
-          variant === 'indigo-dark-mode' ||
-          variant === 'disabled-dark-mode',
-        'bg-white text-gray-900': ![
-          'outline-dark',
-          'outline-red-dark-mode',
-          'outline-jade-dark-mode',
-          'outline-indigo-dark-mode',
-          'outline-purple-dark-mode',
-          'red-dark-mode',
-          'indigo-dark-mode',
-          'disabled-dark-mode',
-        ].includes(variant),
+        'bg-gray-1000 text-white': darkVariants.includes(variant),
+        'bg-white text-gray-900': !darkVariants.includes(variant),
       }"
     >
       {{ variant }}