diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
index 18285b650c66..dc9fe3e75eef 100644
--- a/packages/main/src/Button.js
+++ b/packages/main/src/Button.js
@@ -39,6 +39,7 @@ const metadata = {
 		 * <li><code>Positive</code></li>
 		 * <li><code>Negative</code></li>
 		 * <li><code>Transparent</code></li>
+		 * <li><code>Attention</code></li>
 		 * </ul>
 		 *
 		 * @type {ButtonDesign}
diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css
index 1d968d889d62..c44bc946d826 100644
--- a/packages/main/src/themes/Button.css
+++ b/packages/main/src/themes/Button.css
@@ -202,6 +202,37 @@ bdi {
 	outline-color: var(--sapContent_ContrastFocusColor);
 }
 
+:host([design="Attention"]) {
+	background-color: var(--sapButton_Attention_Background);
+	border-color: var(--sapButton_Attention_BorderColor);
+	color: var(--sapButton_Attention_TextColor);
+	text-shadow: var(--_ui5_button_text_shadow);
+}
+
+/*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/
+:host([design="Attention"]:not([active]):not([non-interactive]):not([_is-touch]):hover),
+:host([design="Attention"]:not([active]):not([non-interactive]):not([_is-touch]).ui5_hovered) {
+	background-color: var(--sapButton_Attention_Hover_Background);
+	border-color: var(--sapButton_Attention_Hover_BorderColor);
+	color: var(--sapButton_Attention_Hover_TextColor);
+}
+
+:host([ui5-button][design="Attention"][active]:not([non-interactive])) {
+	background-color: var(--sapButton_Attention_Active_Background);
+	border-color: var(--sapButton_Attention_Active_BorderColor);
+	color: var(--sapButton_Attention_Active_TextColor);
+	text-shadow: none;
+}
+
+:host([design="Attention"][focused]:not([_is-touch])) {
+	outline-color: var(--_ui5_button_attention_border_focus_hover_color);
+	border-color: var(--_ui5_button_attention_focus_border_color);
+}
+
+:host([design="Attention"][active][focused]) {
+	outline-color: var(--sapContent_ContrastFocusColor);
+}
+
 :host([design="Emphasized"]) {
 	background-color: var(--sapButton_Emphasized_Background);
 	border-color: var(--sapButton_Emphasized_BorderColor);
diff --git a/packages/main/src/types/ButtonDesign.js b/packages/main/src/types/ButtonDesign.js
index 8f480fc471f9..96e3c86a951c 100644
--- a/packages/main/src/types/ButtonDesign.js
+++ b/packages/main/src/types/ButtonDesign.js
@@ -39,6 +39,13 @@ const ButtonTypes = {
 	 * @type {Emphasized}
 	 */
 	Emphasized: "Emphasized",
+
+	/**
+	 * attention type
+	 * @public
+	 * @type {Attention}
+	 */
+	Attention: "Attention",
 };
 
 /**
diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html
index 97bfb5059f0b..250e75cf438b 100644
--- a/packages/main/test/pages/Button.html
+++ b/packages/main/test/pages/Button.html
@@ -67,7 +67,9 @@
 	<ui5-button disabled>Inactive</ui5-button>
 	<ui5-button design="Positive">Agree</ui5-button>
 	<ui5-button design="Negative">Decline</ui5-button>
-
+	<ui5-button design="Attention">Warning</ui5-button>
+	<ui5-button design="Attention" icon="message-warning">Warning</ui5-button>
+	<ui5-button design="Attention" icon="message-warning"></ui5-button>
 	<br/>
 	<br/>
 	<br/>
diff --git a/packages/main/test/samples/Button.sample.html b/packages/main/test/samples/Button.sample.html
index a91b33274b00..524807b6c08a 100644
--- a/packages/main/test/samples/Button.sample.html
+++ b/packages/main/test/samples/Button.sample.html
@@ -14,6 +14,7 @@ <h3>Basic Button</h3>
 		<ui5-button class="samples-margin" design="Transparent">Cancel</ui5-button>
 		<ui5-button class="samples-margin" design="Positive">Approve</ui5-button>
 		<ui5-button class="samples-margin" design="Negative">Decline</ui5-button>
+		<ui5-button class="samples-margin" design="Attention">Warning</ui5-button>
 		<ui5-button class="samples-margin" design="Emphasized">Subscribe</ui5-button>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
@@ -22,6 +23,7 @@ <h3>Basic Button</h3>
 <ui5-button design="Transparent">Cancel</ui5-button>
 <ui5-button design="Positive">Approve</ui5-button>
 <ui5-button design="Negative">Decline</ui5-button>
+<ui5-button design="Attention">Warning</ui5-button>
 <ui5-button design="Emphasized">Subscribe</ui5-button>
 	</xmp></pre>
 </section>
@@ -33,6 +35,7 @@ <h3>Button with Icon</h3>
 		<ui5-button class="samples-margin" icon="download" icon-end>Download</ui5-button>
 		<ui5-button class="samples-margin" design="Positive" icon="add">Add</ui5-button>
 		<ui5-button class="samples-margin" design="Negative" icon="delete">Remove</ui5-button>
+		<ui5-button class="samples-margin" design="Attention" icon="message-warning">Warning</ui5-button>
 		<ui5-button class="samples-margin" design="Transparent" icon="accept">Accept</ui5-button>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
@@ -40,6 +43,7 @@ <h3>Button with Icon</h3>
 <ui5-button icon="download" icon-end>Download</ui5-button>
 <ui5-button design="Positive" icon="add">Add</ui5-button>
 <ui5-button design="Negative" icon="delete">Remove</ui5-button>
+<ui5-button design="Attention" icon="message-warning">Warning</ui5-button>
 <ui5-button design="Transparent" icon="accept">Transparent</ui5-button>
 	</xmp></pre>
 </section>
@@ -91,6 +95,7 @@ <h3>Button with Design</h3>
 		<ui5-button class="samples-margin" design="Positive">Agree</ui5-button>
 		<ui5-button class="samples-margin" design="Negative">Decline</ui5-button>
 		<ui5-button class="samples-margin" design="Default">Default</ui5-button>
+		<ui5-button class="samples-margin" design="Attention">Warning</ui5-button>
 		<ui5-button class="samples-margin" design="Transparent">Transparent</ui5-button>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
@@ -98,6 +103,7 @@ <h3>Button with Design</h3>
 <ui5-button design="Positive">Agree</ui5-button>
 <ui5-button design="Negative">Decline</ui5-button>
 <ui5-button design="Default">Default</ui5-button>
+<ui5-button design="Attention">Warning</ui5-button>
 <ui5-button design="Transparent">Transparent</ui5-button>
 	</xmp></pre>
 </section>
diff --git a/packages/theme-base/css-vars-usage.json b/packages/theme-base/css-vars-usage.json
index 82641390812a..c2a3eacb8013 100644
--- a/packages/theme-base/css-vars-usage.json
+++ b/packages/theme-base/css-vars-usage.json
@@ -25,6 +25,14 @@
   "--sapButton_Active_Background",
   "--sapButton_Active_BorderColor",
   "--sapButton_Active_TextColor",
+  "--sapButton_Attention_Active_Background",
+  "--sapButton_Attention_Active_BorderColor",
+  "--sapButton_Attention_Active_TextColor",
+  "--sapButton_Attention_Background",
+  "--sapButton_Attention_BorderColor",
+  "--sapButton_Attention_Hover_Background",
+  "--sapButton_Attention_Hover_BorderColor",
+  "--sapButton_Attention_TextColor",
   "--sapButton_Background",
   "--sapButton_BorderColor",
   "--sapButton_BorderCornerRadius",