diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 0ff7e3a..734bba0 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -43,13 +43,18 @@
   white-space: nowrap;
   width: var(--mykn-button-width);
 
-  &[disabled],
-  &--disabled {
+  &:disabled,
+  &--disabled,
+  &--muted {
     --mykn-button-offset: 0 !important;
-    pointer-events: none;
     opacity: 0.4;
   }
 
+  &:disabled,
+  &--disabled {
+    pointer-events: none;
+  }
+
   &--align-start {
     justify-content: start;
     text-align: start;
@@ -78,10 +83,6 @@
     --mykn-button-width: 100%;
   }
 
-  &--muted {
-    --mykn-button-color-text: var(--typography-color-muted) !important;
-  }
-
   &--pad-h {
     --mykn-button-padding-h: var(--mykn-button-padding-xs, var(--spacing-h));
   }
@@ -128,6 +129,15 @@
     --mykn-button-color-shadow: var(--button-color-shadow-primary);
     --mykn-button-color-text: var(--button-color-text-primary);
 
+    &#{$self}:disabled,
+    &#{$self}--disabled,
+    &#{$self}--muted {
+      --mykn-button-color-background: var(--button-color-background-secondary);
+      --mykn-button-color-border: var(--button-color-border-secondary);
+      --mykn-button-color-shadow: var(--button-color-shadow-secondary);
+      --mykn-button-color-text: var(--button-color-text-secondary);
+    }
+
     &:focus,
     &:hover {
       --mykn-button-color-background: var(
diff --git a/src/components/button/button.stories.tsx b/src/components/button/button.stories.tsx
index 68d1a8b..ee1384d 100644
--- a/src/components/button/button.stories.tsx
+++ b/src/components/button/button.stories.tsx
@@ -50,6 +50,12 @@ export const JustifiedButtons: Story = {
   },
 };
 
+export const DisabledButtons: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
 export const MutedButtons: Story = {
   args: {
     muted: true,