diff --git a/resources/js/components/ui/Button/Button.vue b/resources/js/components/ui/Button/Button.vue
index a1220ab26b..0e2cd4a083 100644
--- a/resources/js/components/ui/Button/Button.vue
+++ b/resources/js/components/ui/Button/Button.vue
@@ -57,7 +57,7 @@ const buttonClasses = computed(() => {
                 primary: [
                     'bg-linear-to-b from-primary/90 to-primary hover:bg-primary-hover text-white disabled:opacity-60 disabled:text-white dark:disabled:text-white border border-primary-border shadow-ui-md inset-shadow-2xs inset-shadow-white/25 disabled:inset-shadow-none dark:disabled:inset-shadow-none [&_svg]:text-white [&_svg]:opacity-60',
                 ],
-                danger: 'bg-linear-to-b from-red-700/90 to-red-700 hover:bg-red-700/90 text-white border border-red-700 inset-shadow-xs inset-shadow-red-300 [&_svg]:text-red-200 disabled:text-white disabled:opacity-60 disabled:inset-shadow-none',
+                danger: 'bg-linear-to-b from-red-700/90 to-red-700 hover:bg-red-700/90 text-white border border-red-700 inset-shadow-xs inset-shadow-red-300 [&_svg]:text-red-200 disabled:text-white! disabled:opacity-60 disabled:inset-shadow-none',
                 filled: 'bg-black/5 hover:bg-black/10 hover:text-gray-900 dark:hover:text-white dark:bg-white/15 dark:hover:bg-white/20 [&_svg]:opacity-70',
                 ghost: 'bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/7 dark:hover:text-gray-200',
                 'ghost-pressed': 'bg-transparent hover:bg-gray-400/10 text-gray-925 dark:text-white dark:hover:bg-white/7 dark:hover:text-white [&_svg]:opacity-100',
diff --git a/resources/js/pages/Playground.vue b/resources/js/pages/Playground.vue
index 6c73f167b6..5b118ca2ba 100644
--- a/resources/js/pages/Playground.vue
+++ b/resources/js/pages/Playground.vue
@@ -210,6 +210,7 @@ defineProps(['icons']);
                     <ui-button icon="save" text="Primary" variant="primary" />
                     <ui-button icon="save" text="Danger" variant="danger" />
                     <ui-button text="Danger Disabled" variant="danger" disabled />
+                    <ui-button text="Disabled" disabled />
                     <ui-button icon="save" text="Filled" variant="filled" />
                     <ui-button icon="save" text="Ghost" variant="ghost" />
                     <ui-button icon="save" text="Subtle" variant="subtle" />