diff --git a/packages/components/src/button/stories/index.js b/packages/components/src/button/stories/index.js
index c5cc02b7922d42..faf75af0d5fb19 100644
--- a/packages/components/src/button/stories/index.js
+++ b/packages/components/src/button/stories/index.js
@@ -57,6 +57,23 @@ export const isDestructive = () => {
 	);
 };
 
+export const isPrimaryDestructive = () => {
+	const label = text( 'Label', 'Destructive Primary Button' );
+	const isSmall = boolean( 'isSmall', false );
+	const disabled = boolean( 'disabled', false );
+
+	return (
+		<Button
+			isPrimary
+			isDestructive
+			isSmall={ isSmall }
+			disabled={ disabled }
+		>
+			{ label }
+		</Button>
+	);
+};
+
 export const small = () => {
 	const label = text( 'Label', 'Small Button' );
 
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index 208c34b8f795d6..8dd03628724f54 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -183,6 +183,19 @@
 		}
 	}
 
+	&.is-destructive.is-primary {
+		color: #fff;
+		background: $alert-red;
+		box-shadow: inset 0 0 0 $border-width $alert-red;
+
+		&:hover:not(:disabled) {
+			color: #fff;
+			background: darken($alert-red, 20%);
+			box-shadow: inset 0 0 0 $border-width darken($alert-red, 20%);
+		}
+	}
+
+
 	/**
 	 * Link buttons.
 	 */