From d277bbb4bff501e15ce9011e0a88e363c9d23f48 Mon Sep 17 00:00:00 2001
From: hsing <hsingyuc.7@gmail.com>
Date: Wed, 16 Dec 2020 21:49:28 -0500
Subject: [PATCH] Add primary destructive button style

---
 packages/components/src/button/stories/index.js | 17 +++++++++++++++++
 packages/components/src/button/style.scss       | 13 +++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/packages/components/src/button/stories/index.js b/packages/components/src/button/stories/index.js
index c5cc02b7922d4..faf75af0d5fb1 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 208c34b8f795d..8dd03628724f5 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.
 	 */