From d2cae0370ff60c71cab95e0939fe8da62ae82bb1 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <marco.dauria@siemens.com>
Date: Tue, 20 Jan 2026 13:09:27 +0100
Subject: [PATCH] docs(buttons): update buttons examples

---
 ...s-element-examples-chromium-dark-linux.png |   4 +-
 ...-element-examples-chromium-light-linux.png |   4 +-
 .../buttons--button-groups.yaml               |  47 ++-
 ...s-element-examples-chromium-dark-linux.png |   4 +-
 ...-element-examples-chromium-light-linux.png |   4 +-
 ...s-element-examples-chromium-dark-linux.png |   4 +-
 ...-element-examples-chromium-light-linux.png |   4 +-
 .../buttons--selection-buttons.yaml           |  58 ++-
 .../buttons--split-button.yaml                |   4 +-
 .../src/styles/bootstrap/_button-group.scss   |   4 +
 src/app/examples/buttons/button-groups.html   | 173 +++++++--
 src/app/examples/buttons/button-groups.ts     |   3 +-
 .../examples/buttons/buttoncategories.html    |  39 --
 src/app/examples/buttons/buttoncategories.ts  |  12 -
 .../examples/buttons/buttons-placement.html   | 112 ++++--
 src/app/examples/buttons/buttons.html         |   6 +-
 src/app/examples/buttons/buttontypes.html     | 156 --------
 src/app/examples/buttons/buttontypes.ts       |  17 -
 .../examples/buttons/selection-buttons.html   | 334 +++++++++++++++---
 src/app/examples/buttons/selection-buttons.ts |   3 +
 src/app/examples/buttons/split-button.html    |  20 +-
 src/app/examples/buttons/split-button.ts      |   3 +-
 22 files changed, 621 insertions(+), 394 deletions(-)
 delete mode 100644 src/app/examples/buttons/buttoncategories.html
 delete mode 100644 src/app/examples/buttons/buttoncategories.ts
 delete mode 100644 src/app/examples/buttons/buttontypes.html
 delete mode 100644 src/app/examples/buttons/buttontypes.ts

diff --git a/playwright/snapshots/static.spec.ts-snapshots/buttons--button-groups-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/buttons--button-groups-element-examples-chromium-dark-linux.png
index cddb5f67c..13cc50b63 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/buttons--button-groups-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/buttons--button-groups-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3f24ad8a5f32c127c3e171c4b8e527df66609175bab0a7b5ca24b88257a889e2
-size 28384
+oid sha256:dab25dfd0b1911a9cb7b606ccbf4e14d24c11a15c996f4ab146a2133eb8b0e3f
+size 33554
diff --git a/playwright/snapshots/static.spec.ts-snapshots/buttons--button-groups-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/buttons--button-groups-element-examples-chromium-light-linux.png
index 6b3e45060..7e4dd7649 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/buttons--button-groups-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/buttons--button-groups-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1e4d8da30cc8fe9f204092438f62e63a3745af2377bbe180267d39718c3c8e35
-size 34136
+oid sha256:80286b56e334f8d51188a57b964f4504d1882f22638928909db815eb9e86eca6
+size 39376
diff --git a/playwright/snapshots/static.spec.ts-snapshots/buttons--button-groups.yaml b/playwright/snapshots/static.spec.ts-snapshots/buttons--button-groups.yaml
index 2ca04075d..960d39628 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/buttons--button-groups.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/buttons--button-groups.yaml
@@ -23,6 +23,19 @@
   - button "Start"
   - button "Middle"
   - button "End"
+- heading "With icons" [level=4]
+- group "Primary group with icon and text":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
+- group "Secondary group with icon and text":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
+- group "Tertiary group with icon and text":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
 - group "Primary group":
   - button "Edit"
   - button "Copy"
@@ -35,16 +48,20 @@
   - button "Edit"
   - button "Copy"
   - button "Delete"
+- group "Ghost group":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
 - heading "Sizing" [level=4]
-- group "Large group":
+- group "Large group with icon and text":
   - button "Large"
   - button "Group"
   - button "Size"
-- group "Default group":
+- group "Default group with icon and text":
   - button "Default"
   - button "Group"
   - button "Size"
-- group "Small group":
+- group "Small group with icon and text":
   - button "Small"
   - button "Group"
   - button "Size"
@@ -60,15 +77,15 @@
   - button "Small"
   - button "Group"
   - button "Size"
-- group "Large group":
-  - button "Large"
-  - button "Group"
-  - button "Size"
-- group "Default group":
-  - button "Default"
-  - button "Group"
-  - button "Size"
-- group "Small group":
-  - button "Small"
-  - button "Group"
-  - button "Size"
\ No newline at end of file
+- group "Large icon group":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
+- group "Default icon group":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
+- group "Small icon group":
+  - button "Edit"
+  - button "Copy"
+  - button "Delete"
\ No newline at end of file
diff --git a/playwright/snapshots/static.spec.ts-snapshots/buttons--buttons-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/buttons--buttons-element-examples-chromium-dark-linux.png
index 5af427bfe..8e2845da5 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/buttons--buttons-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/buttons--buttons-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:818b4ca102f636df3edb111494cf73eba171ff6cdcf1d983953b131a38b69f59
-size 58168
+oid sha256:99a1ba7bac55ccdcccdeb9d77ba3874acd7420682a571b2c5edd62c3cb7f5ee9
+size 58023
diff --git a/playwright/snapshots/static.spec.ts-snapshots/buttons--buttons-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/buttons--buttons-element-examples-chromium-light-linux.png
index 3a1c4e165..9b819f058 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/buttons--buttons-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/buttons--buttons-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2abe80bb54f546ac9aa3c83e596810ea37506c5e29a841df9e19f4bdf861a2cc
-size 61528
+oid sha256:55052e2a17ccc4ed3bf0fe722549b063d3afa10428734c4c5259579c92b9a515
+size 61339
diff --git a/playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons-element-examples-chromium-dark-linux.png
index 615e4eaea..6dd4063ec 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e47780f1d62841758b43a670b7ff8a78118d8e1dfda1e1e87402a57ad95eb7ac
-size 22194
+oid sha256:3c5bdaa7c2759dd1a2c064e96d029ee2744bc22d27001f25891d54acf74e2ef9
+size 34984
diff --git a/playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons-element-examples-chromium-light-linux.png
index af33bbe60..20121eaec 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:43ab07bf96fa6f42958a55823215deb51ec9ac4d9b7e3c68998304d5adddaf2f
-size 23270
+oid sha256:28f0c7547b2fd08e03f3c409eb870a75bb7d7d91f5affead2a03c334be2fffa2
+size 37262
diff --git a/playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons.yaml b/playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons.yaml
index 6eb0c0992..f7ecb6614 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/buttons--selection-buttons.yaml
@@ -1,4 +1,3 @@
-- heading "Single-select" [level=4]
 - group "Basic radio toggle button group":
   - radio "Day" [checked]
   - text: ""
@@ -6,17 +5,33 @@
   - text: ""
   - radio "Month"
   - text: ""
-- group "Radio toggle button group with icon":
+- group "Temperature mode selection":
   - radio "Comfort" [checked]
   - text: ""
   - radio "Pre-comfort"
   - text: ""
   - radio "Economy"
   - text: ""
-- group "Layout selection toggle":
+- group "Layout selection":
   - radio "One pane" [checked]
   - radio "Two panes"
   - radio "Three panes"
+- heading "Multi-select" [level=4]
+- group "Email status filter":
+  - checkbox "Read" [checked]
+  - text: ""
+  - checkbox "Unread"
+  - text: ""
+  - checkbox "Archived" [checked]
+  - text: ""
+  - checkbox "Deleted"
+  - text: ""
+- group "Category filter":
+  - checkbox "Garden" [checked]
+  - checkbox "Mobile"
+  - checkbox "Cloud" [checked]
+  - checkbox "AI"
+  - checkbox "Network"
 - heading "Sizing" [level=4]
 - group "Basic radio toggle button group":
   - radio "Large" [checked]
@@ -39,11 +54,36 @@
   - text: ""
   - radio "Size"
   - text: ""
-- heading "Multi-select" [level=4]
-- group "Basic checkbox toggle button group":
-  - checkbox "€"
+- group "Basic radio toggle button group":
+  - radio "Large" [checked]
+  - text: ""
+  - radio "Group"
   - text: ""
-  - checkbox "€€"
+  - radio "Size"
+  - text: ""
+- group "Basic radio toggle button group":
+  - radio "Default" [checked]
+  - text: ""
+  - radio "Group"
+  - text: ""
+  - radio "Size"
+  - text: ""
+- group "Basic radio toggle button group":
+  - radio "Small" [checked]
+  - text: ""
+  - radio "Group"
+  - text: ""
+  - radio "Size"
   - text: ""
-  - checkbox "€€€"
-  - text: ""
\ No newline at end of file
+- group "Climate control mode":
+  - radio "Heating"
+  - radio "Water"
+  - radio "Cooling"
+- group "Climate control mode":
+  - radio "Heating"
+  - radio "Water"
+  - radio "Cooling"
+- group "Climate control mode":
+  - radio "Heating"
+  - radio "Water"
+  - radio "Cooling"
\ No newline at end of file
diff --git a/playwright/snapshots/static.spec.ts-snapshots/buttons--split-button.yaml b/playwright/snapshots/static.spec.ts-snapshots/buttons--split-button.yaml
index ea5635378..de1f2cbad 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/buttons--split-button.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/buttons--split-button.yaml
@@ -1,8 +1,8 @@
 - group "Split button primary":
-  - button " Button"
+  - button "Button"
   - button "Dropdown toggle"
 - group "Split button secondary":
-  - button " Button"
+  - button "Button"
   - button "Dropdown toggle"
 - group "Split button primary label only":
   - button "Button"
diff --git a/projects/element-theme/src/styles/bootstrap/_button-group.scss b/projects/element-theme/src/styles/bootstrap/_button-group.scss
index 41b267ed8..d4769d76e 100644
--- a/projects/element-theme/src/styles/bootstrap/_button-group.scss
+++ b/projects/element-theme/src/styles/bootstrap/_button-group.scss
@@ -76,6 +76,10 @@ $btn-size-sm: 24px !default;
     &.btn-lg {
       inline-size: $btn-size-lg;
     }
+
+    &.btn-sm {
+      inline-size: $btn-size-sm;
+    }
   }
 
   // Dropdown toggle styling for split buttons
diff --git a/src/app/examples/buttons/button-groups.html b/src/app/examples/buttons/button-groups.html
index e8ec48a10..989df6595 100644
--- a/src/app/examples/buttons/button-groups.html
+++ b/src/app/examples/buttons/button-groups.html
@@ -40,62 +40,149 @@
     </div>
   </div>
 
+  <h4 class="mb-4">With icons</h4>
+  <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
+    <div class="btn-group" role="group" aria-label="Primary group with icon and text">
+      <button type="button" class="btn btn-primary">
+        <si-icon class="icon" icon="element-edit" />
+        Edit
+      </button>
+      <button type="button" class="btn btn-primary">
+        <si-icon class="icon" icon="element-copy" />
+        Copy
+      </button>
+      <button type="button" class="btn btn-primary">
+        <si-icon class="icon" icon="element-delete" />
+        Delete
+      </button>
+    </div>
+
+    <div class="btn-group" role="group" aria-label="Secondary group with icon and text">
+      <button type="button" class="btn btn-secondary">
+        <si-icon class="icon" icon="element-edit" />
+        Edit
+      </button>
+      <button type="button" class="btn btn-secondary">
+        <si-icon class="icon" icon="element-copy" />
+        Copy
+      </button>
+      <button type="button" class="btn btn-secondary">
+        <si-icon class="icon" icon="element-delete" />
+        Delete
+      </button>
+    </div>
+
+    <div class="btn-group" role="group" aria-label="Tertiary group with icon and text">
+      <button type="button" class="btn btn-tertiary">
+        <si-icon class="icon" icon="element-edit" />
+        Edit
+      </button>
+      <button type="button" class="btn btn-tertiary">
+        <si-icon class="icon" icon="element-copy" />
+        Copy
+      </button>
+      <button type="button" class="btn btn-tertiary">
+        <si-icon class="icon" icon="element-delete" />
+        Delete
+      </button>
+    </div>
+  </div>
+
   <div class="d-flex flex-wrap align-items-center gap-3 mb-6" aria-label="Icon button groups">
     <div class="btn-group" role="group" aria-label="Primary group">
       <button type="button" class="btn btn-icon btn-primary" aria-label="Edit">
-        <i class="icon element-edit"></i>
+        <si-icon class="icon" icon="element-edit" />
       </button>
       <button type="button" class="btn btn-icon btn-primary" aria-label="Copy">
-        <i class="icon element-copy"></i>
+        <si-icon class="icon" icon="element-copy" />
       </button>
       <button type="button" class="btn btn-icon btn-primary" aria-label="Delete">
-        <i class="icon element-delete"></i>
+        <si-icon class="icon" icon="element-delete" />
       </button>
     </div>
 
     <div class="btn-group" role="group" aria-label="Secondary group">
       <button type="button" class="btn btn-icon btn-secondary" aria-label="Edit">
-        <i class="icon element-edit"></i>
+        <si-icon class="icon" icon="element-edit" />
       </button>
       <button type="button" class="btn btn-icon btn-secondary" aria-label="Copy">
-        <i class="icon element-copy"></i>
+        <si-icon class="icon" icon="element-copy" />
       </button>
       <button type="button" class="btn btn-icon btn-secondary" aria-label="Delete">
-        <i class="icon element-delete"></i>
+        <si-icon class="icon" icon="element-delete" />
       </button>
     </div>
 
     <div class="btn-group" role="group" aria-label="Tertiary group">
       <button type="button" class="btn btn-icon btn-tertiary" aria-label="Edit">
-        <i class="icon element-edit"></i>
+        <si-icon class="icon" icon="element-edit" />
       </button>
       <button type="button" class="btn btn-icon btn-tertiary" aria-label="Copy">
-        <i class="icon element-copy"></i>
+        <si-icon class="icon" icon="element-copy" />
       </button>
       <button type="button" class="btn btn-icon btn-tertiary" aria-label="Delete">
-        <i class="icon element-delete"></i>
+        <si-icon class="icon" icon="element-delete" />
+      </button>
+    </div>
+
+    <div class="btn-group" role="group" aria-label="Ghost group">
+      <button type="button" class="btn btn-icon btn-ghost" aria-label="Edit">
+        <si-icon class="icon" icon="element-edit" />
+      </button>
+      <button type="button" class="btn btn-icon btn-ghost" aria-label="Copy">
+        <si-icon class="icon" icon="element-copy" />
+      </button>
+      <button type="button" class="btn btn-icon btn-ghost" aria-label="Delete">
+        <si-icon class="icon" icon="element-delete" />
       </button>
     </div>
   </div>
 
   <h4 class="mb-4">Sizing</h4>
   <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
-    <div class="btn-group" role="group" aria-label="Large group">
-      <button type="button" class="btn btn-lg btn-primary">Large</button>
-      <button type="button" class="btn btn-lg btn-primary">Group</button>
-      <button type="button" class="btn btn-lg btn-primary">Size</button>
+    <div class="btn-group" role="group" aria-label="Large group with icon and text">
+      <button type="button" class="btn btn-lg btn-secondary">
+        <si-icon class="icon" icon="element-special-object" />
+        Large
+      </button>
+      <button type="button" class="btn btn-lg btn-secondary">
+        <si-icon class="icon" icon="element-special-object" />
+        Group
+      </button>
+      <button type="button" class="btn btn-lg btn-secondary">
+        <si-icon class="icon" icon="element-special-object" />
+        Size
+      </button>
     </div>
 
-    <div class="btn-group" role="group" aria-label="Default group">
-      <button type="button" class="btn btn-primary">Default</button>
-      <button type="button" class="btn btn-primary">Group</button>
-      <button type="button" class="btn btn-primary">Size</button>
+    <div class="btn-group" role="group" aria-label="Default group with icon and text">
+      <button type="button" class="btn btn-secondary">
+        <si-icon class="icon" icon="element-special-object" />
+        Default
+      </button>
+      <button type="button" class="btn btn-secondary">
+        <si-icon class="icon" icon="element-special-object" />
+        Group
+      </button>
+      <button type="button" class="btn btn-secondary">
+        <si-icon class="icon" icon="element-special-object" />
+        Size
+      </button>
     </div>
 
-    <div class="btn-group" role="group" aria-label="Small group">
-      <button type="button" class="btn btn-sm btn-primary">Small</button>
-      <button type="button" class="btn btn-sm btn-primary">Group</button>
-      <button type="button" class="btn btn-sm btn-primary">Size</button>
+    <div class="btn-group" role="group" aria-label="Small group with icon and text">
+      <button type="button" class="btn btn-sm btn-secondary">
+        <si-icon class="icon" icon="element-special-object" />
+        Small
+      </button>
+      <button type="button" class="btn btn-sm btn-secondary">
+        <si-icon class="icon" icon="element-special-object" />
+        Group
+      </button>
+      <button type="button" class="btn btn-sm btn-secondary">
+        <si-icon class="icon" icon="element-special-object" />
+        Size
+      </button>
     </div>
   </div>
 
@@ -119,23 +206,41 @@ <h4 class="mb-4">Sizing</h4>
     </div>
   </div>
 
-  <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
-    <div class="btn-group" role="group" aria-label="Large group">
-      <button type="button" class="btn btn-lg btn-tertiary">Large</button>
-      <button type="button" class="btn btn-lg btn-tertiary">Group</button>
-      <button type="button" class="btn btn-lg btn-tertiary">Size</button>
+  <div class="d-flex flex-wrap align-items-center gap-4">
+    <div class="btn-group" role="group" aria-label="Large icon group">
+      <button type="button" class="btn btn-icon btn-lg btn-secondary" aria-label="Edit">
+        <si-icon class="icon" icon="element-edit" />
+      </button>
+      <button type="button" class="btn btn-icon btn-lg btn-secondary" aria-label="Copy">
+        <si-icon class="icon" icon="element-copy" />
+      </button>
+      <button type="button" class="btn btn-icon btn-lg btn-secondary" aria-label="Delete">
+        <si-icon class="icon" icon="element-delete" />
+      </button>
     </div>
 
-    <div class="btn-group" role="group" aria-label="Default group">
-      <button type="button" class="btn btn-tertiary">Default</button>
-      <button type="button" class="btn btn-tertiary">Group</button>
-      <button type="button" class="btn btn-tertiary">Size</button>
+    <div class="btn-group" role="group" aria-label="Default icon group">
+      <button type="button" class="btn btn-icon btn-secondary" aria-label="Edit">
+        <si-icon class="icon" icon="element-edit" />
+      </button>
+      <button type="button" class="btn btn-icon btn-secondary" aria-label="Copy">
+        <si-icon class="icon" icon="element-copy" />
+      </button>
+      <button type="button" class="btn btn-icon btn-secondary" aria-label="Delete">
+        <si-icon class="icon" icon="element-delete" />
+      </button>
     </div>
 
-    <div class="btn-group" role="group" aria-label="Small group">
-      <button type="button" class="btn btn-sm btn-tertiary">Small</button>
-      <button type="button" class="btn btn-sm btn-tertiary">Group</button>
-      <button type="button" class="btn btn-sm btn-tertiary">Size</button>
+    <div class="btn-group" role="group" aria-label="Small icon group">
+      <button type="button" class="btn btn-icon btn-sm btn-secondary" aria-label="Edit">
+        <si-icon class="icon" icon="element-edit" />
+      </button>
+      <button type="button" class="btn btn-icon btn-sm btn-secondary" aria-label="Copy">
+        <si-icon class="icon" icon="element-copy" />
+      </button>
+      <button type="button" class="btn btn-icon btn-sm btn-secondary" aria-label="Delete">
+        <si-icon class="icon" icon="element-delete" />
+      </button>
     </div>
   </div>
 </div>
diff --git a/src/app/examples/buttons/button-groups.ts b/src/app/examples/buttons/button-groups.ts
index 19a7de80f..a5aaedeba 100644
--- a/src/app/examples/buttons/button-groups.ts
+++ b/src/app/examples/buttons/button-groups.ts
@@ -3,10 +3,11 @@
  * SPDX-License-Identifier: MIT
  */
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { SiIconComponent } from '@siemens/element-ng/icon';
 
 @Component({
   selector: 'app-sample',
-  imports: [],
+  imports: [SiIconComponent],
   templateUrl: './button-groups.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
diff --git a/src/app/examples/buttons/buttoncategories.html b/src/app/examples/buttons/buttoncategories.html
deleted file mode 100644
index fc4f978de..000000000
--- a/src/app/examples/buttons/buttoncategories.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<div class="h-100 d-flex flex-column align-items-center justify-content-center p-6">
-  <div class="d-flex flex-row align-items-center justify-content-center mb-8">
-    <button type="button" class="btn btn-primary me-6">Primary action</button>
-    <button type="button" class="btn btn-secondary me-6">Secondary action</button>
-    <button type="button" class="btn btn-tertiary">Tertiary action</button>
-  </div>
-
-  <div class="d-flex flex-row align-items-center justify-content-between">
-    <div class="me-11">
-      <button
-        type="button"
-        class="btn btn-circle btn-lg btn-secondary element-left-4 flip-rtl me-6"
-        aria-label="left"
-      ></button>
-      <button
-        type="button"
-        class="btn btn-circle btn-lg btn-primary element-right-4 flip-rtl"
-        aria-label="right"
-      ></button>
-    </div>
-    <div>
-      <button
-        type="button"
-        class="btn btn-circle btn-secondary element-plus me-6"
-        aria-label="plus"
-      ></button>
-      <button
-        type="button"
-        class="btn btn-circle btn-ghost element-delete me-6"
-        aria-label="delete"
-      ></button>
-      <button
-        type="button"
-        class="btn btn-circle btn-secondary element-options-vertical"
-        aria-label="more options"
-      ></button>
-    </div>
-  </div>
-</div>
diff --git a/src/app/examples/buttons/buttoncategories.ts b/src/app/examples/buttons/buttoncategories.ts
deleted file mode 100644
index bc927932b..000000000
--- a/src/app/examples/buttons/buttoncategories.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-@Component({
-  selector: 'app-sample',
-  templateUrl: './buttoncategories.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class SampleComponent {}
diff --git a/src/app/examples/buttons/buttons-placement.html b/src/app/examples/buttons/buttons-placement.html
index 24f68bac0..bbe319159 100644
--- a/src/app/examples/buttons/buttons-placement.html
+++ b/src/app/examples/buttons/buttons-placement.html
@@ -1,44 +1,78 @@
-<div class="d-flex bg-base-1 p-6 mb-6">
-  <button type="button" class="btn btn-warning me-6">
-    Longcat is a long cat is longer than the cat, but longcat is longer than the other cat
-  </button>
-  <button type="button" class="btn btn-primary">
-    Longcat is a long cat is longer than the cat, but longcat is longer than the other cat
-  </button>
-</div>
+<div class="p-5">
+  <section class="row mb-6">
+    <div class="col-12 col-xl-7">
+      <div class="d-flex gap-3 bg-base-1 p-4 rounded-3">
+        <button type="button" class="btn btn-warning">
+          Longcat is a long cat is longer than the cat, but longcat is longer than the other cat
+        </button>
+        <button type="button" class="btn btn-primary">
+          Longcat is a long cat is longer than the cat, but longcat is longer than the other cat
+        </button>
+      </div>
+    </div>
+  </section>
 
-<div class="d-flex bg-base-1 p-6 mb-6">
-  <button type="button" class="btn btn-warning d-inline text-truncate me-6">
-    Longcat is a long cat is longer than the cat, but longcat is longer than the other cat
-  </button>
-  <button type="button" class="btn btn-primary d-inline text-truncate">
-    Longcat is a long cat is longer than the cat, but longcat is longer than the other cat
-  </button>
-</div>
+  <section class="row mb-6">
+    <div class="col-12 col-xl-7">
+      <h4 class="mb-4">With text truncation</h4>
+      <div class="d-flex gap-3 bg-base-1 p-4 rounded-3">
+        <button type="button" class="btn btn-warning d-inline text-truncate">
+          Longcat is a long cat is longer than the cat, but longcat is longer than the other cat
+        </button>
+        <button type="button" class="btn btn-primary d-inline text-truncate">
+          Longcat is a long cat is longer than the cat, but longcat is longer than the other cat
+        </button>
+      </div>
+    </div>
+  </section>
 
-<div class="row m-0 mb-6 px-3 pt-3 pb-6 gy-5 bg-base-1">
-  <div class="col-sm-6 col-12">
-    <button type="button" class="btn btn-warning w-100 mw-100 d-inline text-truncate">
-      Longcat is a long cat is longer than the cat, but longcat is longer than the other cat
-    </button>
-  </div>
-  <div class="col-sm-6 col-12">
-    <button type="button" class="btn btn-primary w-100 mw-100 d-inline text-truncate">
-      Longcat is a long cat is longer than the cat, but longcat is longer than the other cat
-    </button>
-  </div>
-</div>
+  <section class="row mb-6">
+    <div class="col-12 col-xl-7">
+      <h4 class="mb-4"
+        >Responsive grid: vertical layout
+        <code class="bg-base-1 mx-2 py-1 px-2 rounded-2 text-body fw-normal">&lt; 576px</code></h4
+      >
+      <div class="bg-base-1 p-4 rounded-3">
+        <div class="row g-3">
+          <div class="col-sm-6">
+            <button type="button" class="btn btn-warning w-100 d-inline text-truncate">
+              Longcat is a long cat is longer than the cat, but longcat is longer than the other cat
+            </button>
+          </div>
+          <div class="col-sm-6">
+            <button type="button" class="btn btn-primary w-100 d-inline text-truncate">
+              Longcat is a long cat is longer than the cat, but longcat is longer than the other cat
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
 
-<div class="modal-footer bg-base-1 p-6 mb-6">
-  <button type="button" class="btn btn-secondary">Cancel</button>
-  <button type="button" class="btn btn-danger">Discard</button>
-  <button type="button" class="btn btn-primary">Save</button>
-</div>
+  <section class="row mb-6">
+    <div class="col-12 col-xl-7">
+      <h4 class="mb-4"
+        >Modal footer layout using
+        <code class="bg-base-1 mx-2 py-1 px-2 rounded-2 text-body fw-normal"
+          >.modal-footer</code
+        ></h4
+      >
+      <div class="modal-footer bg-base-1 rounded-3">
+        <button type="button" class="btn btn-secondary">Cancel</button>
+        <button type="button" class="btn btn-danger">Discard</button>
+        <button type="button" class="btn btn-primary">Save</button>
+      </div>
+    </div>
+  </section>
 
-<div
-  class="d-flex flex-wrap flex-shrink-0 align-items-center justify-content-end bg-base-1 p-6 mb-6"
->
-  <button type="button" class="btn btn-secondary m-2">Cancel</button>
-  <button type="button" class="btn btn-danger m-2">Discard</button>
-  <button type="button" class="btn btn-primary m-2">Save</button>
+  <section class="row g-4">
+    <div class="col-12 col-xl-7">
+      <h4 class="mb-4">Footer with Bootstrap utilities</h4>
+      <div class="d-flex flex-wrap justify-content-end gap-6 bg-base-1 p-8 rounded-3">
+        <button type="button" class="btn btn-secondary">Cancel</button>
+        <button type="button" class="btn btn-danger">Discard</button>
+        <button type="button" class="btn btn-primary">Save</button>
+      </div>
+    </div>
+  </section>
 </div>
diff --git a/src/app/examples/buttons/buttons.html b/src/app/examples/buttons/buttons.html
index 56e763e7a..6f58d5cba 100644
--- a/src/app/examples/buttons/buttons.html
+++ b/src/app/examples/buttons/buttons.html
@@ -19,13 +19,13 @@
     <h4 class="mb-4">Buttons with icons</h4>
     <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
       <button type="button" class="btn btn-primary" [disabled]="disabled">
-        <i aria-hidden="true" class="icon element-ok-filled"></i>Default
+        <i aria-hidden="true" class="icon element-ok"></i>Default
       </button>
       <button type="button" class="btn btn-warning" [disabled]="disabled">
-        <i aria-hidden="true" class="icon element-alarm-filled"></i>Warning
+        <i aria-hidden="true" class="icon element-alarm"></i>Warning
       </button>
       <button type="button" class="btn btn-danger" [disabled]="disabled">
-        <i aria-hidden="true" class="icon element-delete-filled"></i>Danger
+        <i aria-hidden="true" class="icon element-delete"></i>Danger
       </button>
       <button type="button" class="btn btn-secondary" [disabled]="disabled">
         <i aria-hidden="true" class="icon element-upload"></i>Secondary
diff --git a/src/app/examples/buttons/buttontypes.html b/src/app/examples/buttons/buttontypes.html
deleted file mode 100644
index eb44f8ea0..000000000
--- a/src/app/examples/buttons/buttontypes.html
+++ /dev/null
@@ -1,156 +0,0 @@
-<div class="h-100 d-flex flex-column align-items-center justify-content-center p-6 text-center">
-  <div class="row gx-6 gy-6 mb-6">
-    <div class="col-6 d-flex">
-      <button type="button" class="btn btn-primary text-truncate ms-auto"> Primary button </button>
-    </div>
-    <div class="col-6">
-      <button type="button" class="btn btn-primary text-truncate" [disabled]="disabled">
-        <i class="icon element-download"></i>
-        Primary button
-      </button>
-    </div>
-  </div>
-
-  <div class="row gx-6 gy-6 mb-6">
-    <div class="col-6 d-flex">
-      <button type="button" class="btn btn-warning text-truncate ms-auto" [disabled]="disabled">
-        Warning button
-      </button>
-    </div>
-    <div class="col-6">
-      <button type="button" class="btn btn-warning text-truncate" [disabled]="disabled">
-        <i class="icon element-manual"></i>
-        Warning button
-      </button>
-    </div>
-  </div>
-
-  <div class="row gx-6 gy-6 mb-6">
-    <div class="col-6 d-flex">
-      <button type="button" class="btn btn-danger text-truncate ms-auto" [disabled]="disabled">
-        Danger button
-      </button>
-    </div>
-    <div class="col-6">
-      <button type="button" class="btn btn-danger text-truncate" [disabled]="disabled">
-        <i class="icon element-delete"></i>
-        Danger button
-      </button>
-    </div>
-  </div>
-
-  <div class="row gx-6 gy-6 mb-6">
-    <div class="col-6 d-flex">
-      <button type="button" class="btn btn-secondary text-truncate ms-auto" [disabled]="disabled">
-        Secondary button
-      </button>
-    </div>
-    <div class="col-6">
-      <button type="button" class="btn btn-secondary text-truncate" [disabled]="disabled">
-        <i class="icon element-download"></i>
-        Secondary button
-      </button>
-    </div>
-  </div>
-  <div class="row gx-6 gy-6 mb-6">
-    <div class="col-6 d-flex">
-      <button
-        type="button"
-        class="btn btn-secondary-warning text-truncate ms-auto"
-        [disabled]="disabled"
-      >
-        Secondary button
-      </button>
-    </div>
-    <div class="col-6">
-      <button type="button" class="btn btn-secondary-warning text-truncate" [disabled]="disabled">
-        <i class="icon element-download"></i>
-        Secondary button
-      </button>
-    </div>
-  </div>
-  <div class="row gx-6 gy-6 mb-6">
-    <div class="col-6 d-flex">
-      <button
-        type="button"
-        class="btn btn-secondary-danger text-truncate ms-auto"
-        [disabled]="disabled"
-      >
-        Secondary button
-      </button>
-    </div>
-    <div class="col-6">
-      <button type="button" class="btn btn-secondary-danger text-truncate" [disabled]="disabled">
-        <i class="icon element-download"></i>
-        Secondary button
-      </button>
-    </div>
-  </div>
-
-  <div class="row gx-6 gy-6 mb-6">
-    <div class="col-6 d-flex">
-      <button type="button" class="btn btn-input text-truncate ms-auto" [disabled]="disabled">
-        Input button
-      </button>
-    </div>
-    <div class="col-6">
-      <button
-        type="button"
-        class="btn btn-input dropdown-toggle text-truncate"
-        [disabled]="disabled"
-      >
-        <i class="icon element-calendar"></i>
-        Input button
-        <i class="dropdown-caret icon element-down-2"></i>
-      </button>
-    </div>
-  </div>
-
-  <div class="row gx-6 gy-6 mb-6">
-    <div class="col-6 d-flex">
-      <button type="button" class="btn btn-tertiary text-truncate ms-auto" [disabled]="disabled">
-        Tertiary button
-      </button>
-    </div>
-    <div class="col-6">
-      <button type="button" class="btn btn-tertiary text-truncate" [disabled]="disabled">
-        <i class="icon element-download"></i>
-        Tertiary button
-      </button>
-    </div>
-  </div>
-  <div class="row gx-6 gy-6 mb-6">
-    <div class="col-6 d-flex">
-      <button
-        type="button"
-        class="btn btn-tertiary-warning text-truncate ms-auto"
-        [disabled]="disabled"
-      >
-        Tertiary button
-      </button>
-    </div>
-    <div class="col-6">
-      <button type="button" class="btn btn-tertiary-warning text-truncate" [disabled]="disabled">
-        <i class="icon element-download"></i>
-        Tertiary button
-      </button>
-    </div>
-  </div>
-  <div class="row gx-6 gy-6">
-    <div class="col-6 d-flex">
-      <button
-        type="button"
-        class="btn btn-tertiary-danger text-truncate ms-auto"
-        [disabled]="disabled"
-      >
-        Tertiary button
-      </button>
-    </div>
-    <div class="col-6">
-      <button type="button" class="btn btn-tertiary-danger text-truncate" [disabled]="disabled">
-        <i class="icon element-download"></i>
-        Tertiary button
-      </button>
-    </div>
-  </div>
-</div>
diff --git a/src/app/examples/buttons/buttontypes.ts b/src/app/examples/buttons/buttontypes.ts
deleted file mode 100644
index f571e90d8..000000000
--- a/src/app/examples/buttons/buttontypes.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-@Component({
-  selector: 'app-sample',
-  templateUrl: './buttontypes.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'bg-base-1'
-  }
-})
-export class SampleComponent {
-  disabled = false;
-}
diff --git a/src/app/examples/buttons/selection-buttons.html b/src/app/examples/buttons/selection-buttons.html
index 1d242cac5..f26c47e6a 100644
--- a/src/app/examples/buttons/selection-buttons.html
+++ b/src/app/examples/buttons/selection-buttons.html
@@ -1,56 +1,207 @@
-<h4>Single-select</h4>
-<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
-  <input type="radio" class="btn-check" name="btnradio1" id="btnradio1-1" checked />
-  <label class="btn" for="btnradio1-1">Day</label>
+<div class="d-flex flex-wrap align-items-center gap-4 mb-6">
+  <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
+    <input type="radio" class="btn-check" name="btnradio1" id="btnradio1-1" checked />
+    <label class="btn" for="btnradio1-1">Day</label>
+
+    <input type="radio" class="btn-check" name="btnradio1" id="btnradio1-2" />
+    <label class="btn" for="btnradio1-2">Week</label>
+
+    <input type="radio" class="btn-check" name="btnradio1" id="btnradio1-3" />
+    <label class="btn" for="btnradio1-3">Month</label>
+  </div>
+
+  <div class="btn-group" role="group" aria-label="Temperature mode selection">
+    <input type="radio" class="btn-check" name="btnradio2" id="btnradio2-1" checked />
+    <label class="btn" for="btnradio2-1">
+      <si-icon class="icon" icon="element-sun" />
+      Comfort
+    </label>
+
+    <input type="radio" class="btn-check" name="btnradio2" id="btnradio2-2" />
+    <label class="btn" for="btnradio2-2">
+      <si-icon class="icon" icon="element-precomfort" />
+      Pre-comfort
+    </label>
+
+    <input type="radio" class="btn-check" name="btnradio2" id="btnradio2-3" />
+    <label class="btn" for="btnradio2-3">
+      <si-icon class="icon" icon="element-economy" />
+      Economy
+    </label>
+  </div>
+
+  <div class="btn-group" role="group" aria-label="Layout selection">
+    <label>
+      <input
+        type="radio"
+        class="btn-check"
+        name="btnradio3"
+        siTooltip="One pane"
+        aria-label="One pane"
+        checked
+      />
+      <span class="btn btn-icon">
+        <si-icon class="icon" icon="element-layout-pane-1" />
+      </span>
+    </label>
 
-  <input type="radio" class="btn-check" name="btnradio1" id="btnradio1-2" />
-  <label class="btn" for="btnradio1-2">Week</label>
+    <label>
+      <input
+        type="radio"
+        class="btn-check"
+        name="btnradio3"
+        siTooltip="Two panes"
+        aria-label="Two panes"
+      />
+      <span class="btn btn-icon">
+        <si-icon class="icon" icon="element-layout-pane-2" />
+      </span>
+    </label>
 
-  <input type="radio" class="btn-check" name="btnradio1" id="btnradio1-3" />
-  <label class="btn" for="btnradio1-3">Month</label>
+    <label>
+      <input
+        type="radio"
+        class="btn-check"
+        name="btnradio3"
+        siTooltip="Three panes"
+        aria-label="Three panes"
+      />
+      <span class="btn btn-icon">
+        <si-icon class="icon" icon="element-layout-pane-3" />
+      </span>
+    </label>
+  </div>
 </div>
-<br /><br />
 
-<div class="btn-group" role="group" aria-label="Radio toggle button group with icon">
-  <input type="radio" class="btn-check" name="btnradio2" id="btnradio2-1" checked />
-  <label class="btn" for="btnradio2-1">
-    <i class="icon element-sun" aria-hidden="true"></i>
-    Comfort
-  </label>
+<h4>Multi-select</h4>
+<div class="mb-6">
+  <div class="btn-group" role="group" aria-label="Email status filter">
+    <input type="checkbox" class="btn-check" id="statuscheck1" checked />
+    <label class="btn" for="statuscheck1">
+      <si-icon class="icon" icon="element-ok" />
+      Read
+    </label>
+
+    <input type="checkbox" class="btn-check" id="statuscheck2" />
+    <label class="btn" for="statuscheck2">
+      <si-icon class="icon" icon="element-mail" />
+      Unread
+    </label>
 
-  <input type="radio" class="btn-check" name="btnradio2" id="btnradio2-2" />
-  <label class="btn" for="btnradio2-2">
-    <i class="icon element-precomfort" aria-hidden="true"></i>
-    Pre-comfort
+    <input type="checkbox" class="btn-check" id="statuscheck3" checked />
+    <label class="btn" for="statuscheck3">
+      <si-icon class="icon" icon="element-archive" />
+      Archived
+    </label>
+
+    <input type="checkbox" class="btn-check" id="statuscheck4" />
+    <label class="btn" for="statuscheck4">
+      <si-icon class="icon" icon="element-delete" />
+      Deleted
+    </label>
+  </div>
+</div>
+
+<div class="btn-group mb-6" role="group" aria-label="Category filter">
+  <label>
+    <input type="checkbox" class="btn-check" siTooltip="Garden" aria-label="Garden" checked />
+    <span class="btn btn-icon">
+      <si-icon class="icon" icon="element-garden" />
+    </span>
   </label>
 
-  <input type="radio" class="btn-check" name="btnradio2" id="btnradio2-3" />
-  <label class="btn" for="btnradio2-3">
-    <i class="icon element-eco" aria-hidden="true"></i>
-    Economy
+  <label>
+    <input type="checkbox" class="btn-check" siTooltip="Mobile" aria-label="Mobile" />
+    <span class="btn btn-icon">
+      <si-icon class="icon" icon="element-smartphone" />
+    </span>
   </label>
-</div>
-<br /><br />
 
-<div class="btn-group" role="group" aria-label="Layout selection toggle">
-  <input type="radio" class="btn-check" name="btnradio3" id="btnradio3-1" checked />
-  <label class="btn btn-icon" for="btnradio3-1" aria-label="One pane">
-    <i class="icon element-layout-pane-1" aria-hidden="true"></i>
+  <label>
+    <input type="checkbox" class="btn-check" siTooltip="Cloud" aria-label="Cloud" checked />
+    <span class="btn btn-icon">
+      <si-icon class="icon" icon="element-cloud" />
+    </span>
   </label>
 
-  <input type="radio" class="btn-check" name="btnradio3" id="btnradio3-2" />
-  <label class="btn btn-icon" for="btnradio3-2" aria-label="Two panes">
-    <i class="icon element-layout-pane-2" aria-hidden="true"></i>
+  <label>
+    <input type="checkbox" class="btn-check" siTooltip="AI" aria-label="AI" />
+    <span class="btn btn-icon">
+      <si-icon class="icon" icon="element-ai" />
+    </span>
   </label>
 
-  <input type="radio" class="btn-check" name="btnradio3" id="btnradio3-3" />
-  <label class="btn btn-icon" for="btnradio3-3" aria-label="Three panes">
-    <i class="icon element-layout-pane-3" aria-hidden="true"></i>
+  <label>
+    <input type="checkbox" class="btn-check" siTooltip="Network" aria-label="Network" />
+    <span class="btn btn-icon">
+      <si-icon class="icon" icon="element-network" />
+    </span>
   </label>
 </div>
-<br /><br />
 
 <h4>Sizing</h4>
+<div class="d-flex flex-wrap align-items-center gap-4 mb-6">
+  <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
+    <input type="radio" class="btn-check" name="btnradio10" id="btnradio10-1" checked />
+    <label class="btn btn-lg" for="btnradio10-1">
+      <si-icon class="icon" icon="element-align-left" />
+      Large
+    </label>
+
+    <input type="radio" class="btn-check" name="btnradio10" id="btnradio10-2" />
+    <label class="btn btn-lg" for="btnradio10-2">
+      <si-icon class="icon" icon="element-align-horizontal-centers" />
+      Group
+    </label>
+
+    <input type="radio" class="btn-check" name="btnradio10" id="btnradio10-3" />
+    <label class="btn btn-lg" for="btnradio10-3">
+      <si-icon class="icon" icon="element-align-right" />
+      Size
+    </label>
+  </div>
+
+  <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
+    <input type="radio" class="btn-check" name="btnradio11" id="btnradio11-1" checked />
+    <label class="btn" for="btnradio11-1">
+      <si-icon class="icon" icon="element-align-left" />
+      Default
+    </label>
+
+    <input type="radio" class="btn-check" name="btnradio11" id="btnradio11-2" />
+    <label class="btn" for="btnradio11-2">
+      <si-icon class="icon" icon="element-align-horizontal-centers" />
+      Group
+    </label>
+
+    <input type="radio" class="btn-check" name="btnradio11" id="btnradio11-3" />
+    <label class="btn" for="btnradio11-3">
+      <si-icon class="icon" icon="element-align-right" />
+      Size
+    </label>
+  </div>
+
+  <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
+    <input type="radio" class="btn-check" name="btnradio12" id="btnradio12-1" checked />
+    <label class="btn btn-sm" for="btnradio12-1">
+      <si-icon class="icon" icon="element-align-left" />
+      Small
+    </label>
+
+    <input type="radio" class="btn-check" name="btnradio12" id="btnradio12-2" />
+    <label class="btn btn-sm" for="btnradio12-2">
+      <si-icon class="icon" icon="element-align-horizontal-centers" />
+      Group
+    </label>
+
+    <input type="radio" class="btn-check" name="btnradio12" id="btnradio12-3" />
+    <label class="btn btn-sm" for="btnradio12-3">
+      <si-icon class="icon" icon="element-align-right" />
+      Size
+    </label>
+  </div>
+</div>
+
 <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
   <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
     <label>
@@ -98,14 +249,109 @@ <h4>Sizing</h4>
   </div>
 </div>
 
-<h4>Multi-select</h4>
-<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
-  <input type="checkbox" class="btn-check" id="btncheck1" />
-  <label class="btn" for="btncheck1">€</label>
+<div class="d-flex flex-wrap align-items-center gap-4 mb-6">
+  <div class="btn-group" role="group" aria-label="Climate control mode">
+    <label>
+      <input
+        type="radio"
+        class="btn-check"
+        name="btnradio7"
+        siTooltip="Heating"
+        aria-label="Heating"
+      />
+      <span class="btn btn-lg btn-icon">
+        <si-icon class="icon" icon="element-sun" />
+      </span>
+    </label>
 
-  <input type="checkbox" class="btn-check" id="btncheck2" />
-  <label class="btn" for="btncheck2">€€</label>
+    <label>
+      <input type="radio" class="btn-check" name="btnradio7" siTooltip="Water" aria-label="Water" />
+      <span class="btn btn-lg btn-icon">
+        <si-icon class="icon" icon="element-water" />
+      </span>
+    </label>
 
-  <input type="checkbox" class="btn-check" id="btncheck3" />
-  <label class="btn" for="btncheck3">€€€</label>
+    <label>
+      <input
+        type="radio"
+        class="btn-check"
+        name="btnradio7"
+        siTooltip="Cooling"
+        aria-label="Cooling"
+      />
+      <span class="btn btn-lg btn-icon">
+        <si-icon class="icon" icon="element-cooling-state" />
+      </span>
+    </label>
+  </div>
+
+  <div class="btn-group" role="group" aria-label="Climate control mode">
+    <label>
+      <input
+        type="radio"
+        class="btn-check"
+        name="btnradio8"
+        siTooltip="Heating"
+        aria-label="Heating"
+      />
+      <span class="btn btn-icon">
+        <si-icon class="icon" icon="element-sun" />
+      </span>
+    </label>
+
+    <label>
+      <input type="radio" class="btn-check" name="btnradio8" siTooltip="Water" aria-label="Water" />
+      <span class="btn btn-icon">
+        <si-icon class="icon" icon="element-water" />
+      </span>
+    </label>
+
+    <label>
+      <input
+        type="radio"
+        class="btn-check"
+        name="btnradio8"
+        siTooltip="Cooling"
+        aria-label="Cooling"
+      />
+      <span class="btn btn-icon">
+        <si-icon class="icon" icon="element-cooling-state" />
+      </span>
+    </label>
+  </div>
+
+  <div class="btn-group" role="group" aria-label="Climate control mode">
+    <label>
+      <input
+        type="radio"
+        class="btn-check"
+        name="btnradio9"
+        siTooltip="Heating"
+        aria-label="Heating"
+      />
+      <span class="btn btn-sm btn-icon">
+        <si-icon class="icon" icon="element-sun" />
+      </span>
+    </label>
+
+    <label>
+      <input type="radio" class="btn-check" name="btnradio9" siTooltip="Water" aria-label="Water" />
+      <span class="btn btn-sm btn-icon">
+        <si-icon class="icon" icon="element-water" />
+      </span>
+    </label>
+
+    <label>
+      <input
+        type="radio"
+        class="btn-check"
+        name="btnradio9"
+        siTooltip="Cooling"
+        aria-label="Cooling"
+      />
+      <span class="btn btn-sm btn-icon">
+        <si-icon class="icon" icon="element-cooling-state" />
+      </span>
+    </label>
+  </div>
 </div>
diff --git a/src/app/examples/buttons/selection-buttons.ts b/src/app/examples/buttons/selection-buttons.ts
index d21479e79..8d91756c3 100644
--- a/src/app/examples/buttons/selection-buttons.ts
+++ b/src/app/examples/buttons/selection-buttons.ts
@@ -3,9 +3,12 @@
  * SPDX-License-Identifier: MIT
  */
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { SiIconComponent } from '@siemens/element-ng/icon';
+import { SiTooltipDirective } from '@siemens/element-ng/tooltip';
 
 @Component({
   selector: 'app-sample',
+  imports: [SiIconComponent, SiTooltipDirective],
   templateUrl: './selection-buttons.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'p-5' }
diff --git a/src/app/examples/buttons/split-button.html b/src/app/examples/buttons/split-button.html
index 6271507db..353351dab 100644
--- a/src/app/examples/buttons/split-button.html
+++ b/src/app/examples/buttons/split-button.html
@@ -2,7 +2,7 @@
   <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
     <div class="btn-group" role="group" aria-label="Split button primary">
       <button type="button" class="btn btn-primary">
-        <i class="icon element-download"></i>
+        <si-icon class="icon" icon="element-download" />
         Button
       </button>
       <button
@@ -14,13 +14,13 @@
         (cdkMenuOpened)="splitOpen1 = true"
         (cdkMenuClosed)="splitOpen1 = false"
       >
-        <i class="dropdown-caret icon element-down-2"></i>
+        <si-icon class="dropdown-caret icon" icon="element-down-2" />
       </button>
     </div>
 
     <div class="btn-group" role="group" aria-label="Split button secondary">
       <button type="button" class="btn btn-secondary">
-        <i class="icon element-download"></i>
+        <si-icon class="icon" icon="element-download" />
         Button
       </button>
       <button
@@ -32,7 +32,7 @@
         (cdkMenuOpened)="splitOpen2 = true"
         (cdkMenuClosed)="splitOpen2 = false"
       >
-        <i class="dropdown-caret icon element-down-2"></i>
+        <si-icon class="dropdown-caret icon" icon="element-down-2" />
       </button>
     </div>
   </div>
@@ -49,7 +49,7 @@
         (cdkMenuOpened)="splitOpen4 = true"
         (cdkMenuClosed)="splitOpen4 = false"
       >
-        <i class="dropdown-caret icon element-down-2"></i>
+        <si-icon class="dropdown-caret icon" icon="element-down-2" />
       </button>
     </div>
 
@@ -64,7 +64,7 @@
         (cdkMenuOpened)="splitOpen5 = true"
         (cdkMenuClosed)="splitOpen5 = false"
       >
-        <i class="dropdown-caret icon element-down-2"></i>
+        <si-icon class="dropdown-caret icon" icon="element-down-2" />
       </button>
     </div>
   </div>
@@ -72,7 +72,7 @@
   <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
     <div class="btn-group" role="group" aria-label="Split button primary icon only">
       <button type="button" class="btn btn-primary btn-icon" aria-label="Button">
-        <i class="icon element-download"></i>
+        <si-icon class="icon" icon="element-download" />
       </button>
       <button
         type="button"
@@ -83,13 +83,13 @@
         (cdkMenuOpened)="splitOpen7 = true"
         (cdkMenuClosed)="splitOpen7 = false"
       >
-        <i class="dropdown-caret icon element-down-2"></i>
+        <si-icon class="dropdown-caret icon" icon="element-down-2" />
       </button>
     </div>
 
     <div class="btn-group" role="group" aria-label="Split button secondary icon only">
       <button type="button" class="btn btn-secondary btn-icon" aria-label="Button">
-        <i class="icon element-download"></i>
+        <si-icon class="icon" icon="element-download" />
       </button>
       <button
         type="button"
@@ -100,7 +100,7 @@
         (cdkMenuOpened)="splitOpen8 = true"
         (cdkMenuClosed)="splitOpen8 = false"
       >
-        <i class="dropdown-caret icon element-down-2"></i>
+        <si-icon class="dropdown-caret icon" icon="element-down-2" />
       </button>
     </div>
   </div>
diff --git a/src/app/examples/buttons/split-button.ts b/src/app/examples/buttons/split-button.ts
index 2aae79a3b..08382d788 100644
--- a/src/app/examples/buttons/split-button.ts
+++ b/src/app/examples/buttons/split-button.ts
@@ -4,11 +4,12 @@
  */
 import { CdkMenuTrigger } from '@angular/cdk/menu';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { SiIconComponent } from '@siemens/element-ng/icon';
 import { SiMenuModule } from '@siemens/element-ng/menu';
 
 @Component({
   selector: 'app-sample',
-  imports: [SiMenuModule, CdkMenuTrigger],
+  imports: [SiMenuModule, CdkMenuTrigger, SiIconComponent],
   templateUrl: './split-button.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })