From a45975bd4211bedc5f860f165ef2334cd2c16bd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Wed, 24 Jun 2026 09:40:32 +0200
Subject: [PATCH] Add call to action button component

---
 components/interactive-elements.html          | 11 +++++++++++
 semantic-tokens-components.html               | 10 ++++++++++
 styles/10-components-interactive-elements.css | 10 ++++++++++
 3 files changed, 31 insertions(+)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index b979055..7b48f53 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -29,6 +29,17 @@
     </div>
   </section>
 
+  <!-- Component: Call-to-action-Button -->
+  <section id="component-call-to-action-button">
+    <p class="sg-preview-label">Component: Call-to-action-Button</p>
+
+    <div class="sg-component-row">
+      <button class="sg-interaction-element sg-button sg-button--cta" type="button" data-component="button" data-component-variant="cta">
+        Call-to-action-Button
+      </button>
+    </div>
+  </section>
+
   <!-- Component: Prozessbutton -->
   <section id="component-process-button">
     <p class="sg-preview-label">Component: Prozessbutton</p>
diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index eedba51..e559437 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -124,6 +124,16 @@
       </tbody>
     </table>
 
+    <h3 class="sg-sub-heading sg-section-h3">Call-to-action-Button</h3>
+    <table class="sg-foundation-table sg-table-label">
+      <thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead>
+      <tbody>
+        <tr><td>surface-button-cta</td><td>color-darkblue</td><td>Fläche des Call-to-action-Buttons.</td></tr>
+        <tr><td>text-button-cta</td><td>color-font-light</td><td>Textfarbe des Call-to-action-Buttons.</td></tr>
+        <tr><td>layout-button-cta-padding</td><td>spacing-large</td><td>Innenabstand des Call-to-action-Buttons auf allen Seiten.</td></tr>
+      </tbody>
+    </table>
+
     <h3 class="sg-sub-heading sg-section-h3">Tabs</h3>
     <table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
       <tr><td>surface-tab-selected</td><td>color-dark-grey</td><td>Fläche des ausgewählten Tabs.</td></tr>
diff --git a/styles/10-components-interactive-elements.css b/styles/10-components-interactive-elements.css
index 4c2648a..33de0c3 100644
--- a/styles/10-components-interactive-elements.css
+++ b/styles/10-components-interactive-elements.css
@@ -142,6 +142,16 @@
       color: var(--text-button-process);
     }
 
+    .sg-button--cta {
+      --surface-button-cta: var(--color-darkblue);
+      --text-button-cta: var(--color-font-light);
+      height: auto;
+      min-height: var(--interaction-height);
+      background: var(--surface-button-cta);
+      color: var(--text-button-cta);
+      padding: var(--spacing-large);
+    }
+
     .sg-button--process-inactive {
       background: var(--surface-button-process-inactive);
       color: var(--text-button-process);