diff --git a/src/colors.ts b/src/colors.ts
index 0c818d0b..0019e49c 100644
--- a/src/colors.ts
+++ b/src/colors.ts
@@ -50,7 +50,7 @@ const safelistByComponent = {
   }],
   button: (colorsAsRegex) => [{
     pattern: new RegExp(`bg-(${colorsAsRegex})-50`),
-    variants: ['hover']
+    variants: ['hover', 'disabled']
   }, {
     pattern: new RegExp(`bg-(${colorsAsRegex})-100`),
     variants: ['hover']
@@ -68,13 +68,13 @@ const safelistByComponent = {
     variants: ['dark:hover']
   }, {
     pattern: new RegExp(`bg-(${colorsAsRegex})-950`),
-    variants: ['dark', 'dark:hover']
+    variants: ['dark', 'dark:hover', 'dark:disabled']
   }, {
     pattern: new RegExp(`text-(${colorsAsRegex})-400`),
-    variants: ['dark']
+    variants: ['dark', 'dark:disabled']
   }, {
     pattern: new RegExp(`text-(${colorsAsRegex})-500`),
-    variants: ['dark:hover']
+    variants: ['dark:hover', 'disabled']
   }, {
     pattern: new RegExp(`text-(${colorsAsRegex})-600`),
     variants: ['hover']
diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 96d5d518..b253f3ab 100644
--- a/src/runtime/app.config.ts
+++ b/src/runtime/app.config.ts
@@ -182,10 +182,10 @@ const button = {
   },
   variant: {
     solid: 'shadow-sm text-white dark:text-gray-900 bg-{color}-500 hover:bg-{color}-600 disabled:bg-{color}-500 dark:bg-{color}-400 dark:hover:bg-{color}-500 dark:disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400',
-    outline: 'ring-1 ring-inset ring-current text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 dark:hover:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
-    soft: 'text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 dark:bg-{color}-950 dark:hover:bg-{color}-900 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
-    ghost: 'text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 dark:hover:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
-    link: 'text-{color}-500 hover:text-{color}-600 dark:text-{color}-400 dark:hover:text-{color}-500 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400'
+    outline: 'ring-1 ring-inset ring-current text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
+    soft: 'text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
+    ghost: 'text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
+    link: 'text-{color}-500 hover:text-{color}-600 disabled:text-{color}-500 dark:text-{color}-400 dark:hover:text-{color}-500 dark:disabled:text-{color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400'
   },
   icon: {
     base: 'flex-shrink-0',