diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
index aaf94fe45f59..4052b6e2cc8f 100644
--- a/packages/components/src/components/button/_button.scss
+++ b/packages/components/src/components/button/_button.scss
@@ -206,7 +206,8 @@
       position: static;
     }
 
-    &.#{$prefix}--btn--ghost .#{$prefix}--btn__icon {
+    &.#{$prefix}--btn--ghost .#{$prefix}--btn__icon,
+    &.#{$prefix}--btn--danger--ghost .#{$prefix}--btn__icon {
       margin: 0;
     }
   }
@@ -309,6 +310,17 @@
         color: $text-04;
         border-color: $active-danger;
       }
+
+      &:disabled,
+      &:hover:disabled,
+      &:focus:disabled,
+      &.#{$prefix}--btn--disabled,
+      &.#{$prefix}--btn--disabled:hover,
+      &.#{$prefix}--btn--disabled:focus {
+        color: $disabled-03;
+        background: transparent;
+        outline: none;
+      }
     }
 
     // TODO: deprecate single dash ghost
diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
index 8f502495b463..0e6b0d2d7e16 100644
--- a/packages/react/src/components/Button/Button-story.js
+++ b/packages/react/src/components/Button/Button-story.js
@@ -35,6 +35,8 @@ const kinds = {
   'Secondary button (secondary)': 'secondary',
   'Tertiary button (tertiary)': 'tertiary',
   'Danger button (danger)': 'danger',
+  'Danger tertiary button (danger--tertiary)': 'danger--tertiary',
+  'Danger ghost button (danger--ghost)': 'danger--ghost',
   'Ghost button (ghost)': 'ghost',
 };
 
@@ -73,17 +75,7 @@ const props = {
     }
     return {
       className: 'some-class',
-      kind: select(
-        'Button kind (kind)',
-        {
-          'Primary button (primary)': 'primary',
-          'Secondary button (secondary)': 'secondary',
-          'Tertiary button (tertiary)': 'tertiary',
-          'Ghost button (ghost)': 'ghost',
-          'Danger button (danger)': 'danger',
-        },
-        'primary'
-      ),
+      kind: select('Button kind (kind)', kinds, 'primary'),
       disabled: boolean('Disabled (disabled)', false),
       size: select('Button size (size)', sizes, 'default'),
       renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse,
@@ -184,7 +176,9 @@ export const Playground = () => {
         }}>
         <Button {...regularProps}>Button</Button>
         &nbsp;
-        <Button hasIconOnly {...iconOnly}></Button>
+        {!regularProps.kind.includes('danger') && (
+          <Button hasIconOnly {...iconOnly}></Button>
+        )}
       </div>
       <div
         style={{