diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index 7b48f53..7fd70a8 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -26,6 +26,10 @@
       <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">
         Link-Button aktiv
       </button>
+
+      <button class="sg-interaction-element sg-button sg-button--warning" type="button" data-component="button" data-component-variant="warning">
+        Link Button Warning
+      </button>
     </div>
   </section>
 
diff --git a/styles/10-components-interactive-elements.css b/styles/10-components-interactive-elements.css
index 95ca3e0..91b280b 100644
--- a/styles/10-components-interactive-elements.css
+++ b/styles/10-components-interactive-elements.css
@@ -139,6 +139,13 @@
       color: var(--text-control-default);
     }
 
+    .sg-button--warning {
+      --surface-button-warning: var(--color-signal-red);
+      --text-button-warning: var(--color-font-light);
+      background: var(--surface-button-warning);
+      color: var(--text-button-warning);
+    }
+
     .sg-button--process {
       background: var(--surface-button-process);
       color: var(--text-button-process);