diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index 7c1b9e4de..e050f5562 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -47,6 +47,11 @@
             background-color: var(--color-signal580);
         }
 
+        &:global(.disabled) {
+            color: var(--color-surfacedarker);
+            background-color: var(--color-surfacedark);
+        }
+
         .icon {
             fill: var(--color-surfacelighter);
             width: 1rem;
diff --git a/storybook/stories/ModalDialog/ModalDialog.js b/storybook/stories/ModalDialog/ModalDialog.js
index e3440b6c1..ec863b32d 100644
--- a/storybook/stories/ModalDialog/ModalDialog.js
+++ b/storybook/stories/ModalDialog/ModalDialog.js
@@ -22,8 +22,8 @@ storiesOf('ModalDialog', module).add('ModalDialog', () => {
             }
         },
         {
-            label: 'A button with a long name', props: {
-                onClick: action('A button with a long name clicked.')
+            label: 'A disabled button with a long name', props: {
+                disabled: true,
             }
         },
         {