From bb454ff0e093a78dbababa0ec24999801af97422 Mon Sep 17 00:00:00 2001
From: Loris Janner <loris.janner@siemens.com>
Date: Wed, 15 Apr 2026 17:03:12 +0200
Subject: [PATCH] feat(element-theme): align ghost button naming convention

`.btn-ghost` now represents the primary ghost button style, consistent
with the naming convention established by `.btn-secondary-ghost` and
`.btn-tertiary-ghost`. All internal usages of the old `.btn-ghost`
(which had tertiary ghost styling) have been migrated to
`.btn-tertiary-ghost`. The transitional `.btn-primary-ghost` class
introduced in v49.5.0 has been removed.

Resolves #1797

BREAKING CHANGE: `.btn-ghost` no longer applies tertiary ghost styling.
When using `.btn-ghost` as a tertiary ghost button it must be renamed
to `.btn-tertiary-ghost`. A schematic migration will be provided to
automate this update.
---
 docs/components/layout-navigation/modals.md        |  2 +-
 .../e2e/element-examples/si-tabs-legacy.spec.ts    |  2 +-
 .../custom-widget-catalog.component.html           |  2 +-
 .../si-alert-dialog/si-alert-dialog.component.html |  2 +-
 .../si-confirmation-dialog.component.html          |  2 +-
 .../si-delete-confirmation-dialog.component.html   |  2 +-
 .../si-edit-discard-dialog.component.html          |  2 +-
 .../launchpad/si-launchpad-factory.component.html  |  2 +-
 .../chat-messages/si-ai-message.component.html     |  4 ++--
 .../si-attachment-list.component.html              |  2 +-
 .../chat-messages/si-chat-input.component.html     |  8 ++++----
 .../chat-messages/si-user-message.component.html   |  4 ++--
 .../si-column-selection-dialog.component.html      |  2 +-
 .../si-timeline-widget-item.component.html         |  4 ++--
 .../file-uploader/si-file-uploader.component.html  |  2 +-
 .../filter-bar/si-filter-pill.component.html       |  2 +-
 .../si-filtered-search-value.component.html        |  2 +-
 .../si-filtered-search.component.html              |  2 +-
 .../si-loading-button.component.scss               |  2 +-
 .../si-navbar-vertical-next.component.html         |  2 +-
 .../si-navbar-vertical.component.html              |  2 +-
 .../si-notification-item.component.html            |  8 ++++----
 .../photo-upload/si-photo-upload.component.html    |  2 +-
 .../pills-input/si-input-pill.component.html       |  6 +++++-
 .../pills-input/si-pills-input.component.spec.ts   |  4 ++--
 .../search-bar/si-search-bar.component.html        |  2 +-
 .../si-side-panel-content.component.html           | 10 +++++-----
 .../si-tabset/si-tabset-legacy.component.html      |  2 +-
 projects/element-ng/tabs/si-tab.component.html     |  2 +-
 .../threshold/si-threshold.component.html          |  2 +-
 .../si-toast-notification.component.html           |  2 +-
 projects/element-ng/tour/si-tour.component.html    |  2 +-
 .../src/styles/bootstrap/_buttons.scss             | 12 +++---------
 src/app/examples/buttons/button-groups.html        |  6 +++---
 src/app/examples/buttons/buttons.html              | 14 +++++++-------
 .../si-chat-messages/si-attachment-list.html       |  2 +-
 .../si-chat-messages/si-chat-container.html        |  4 ++--
 .../examples/si-chat-messages/si-chat-input.html   |  2 +-
 .../examples/si-chat-messages/si-chat-message.html |  6 +++---
 .../si-dashboard/si-timeline-widget-body.ts        |  2 +-
 .../examples/si-dashboard/si-timeline-widget.ts    |  2 +-
 .../examples/si-datepicker/si-modal-service.html   |  2 +-
 .../si-list-details/si-list-details-router.html    |  2 +-
 .../examples/si-list-details/si-list-details.html  |  2 +-
 .../si-loading-spinner/si-loading-button.html      |  2 +-
 .../si-map/si-map-custom-cluster-popover.ts        |  2 +-
 .../examples/si-modals/app-table.component.html    |  2 +-
 src/app/examples/si-modals/si-modal-service.html   |  6 +++---
 src/app/examples/si-wizard/si-wizard-forms.html    |  2 +-
 49 files changed, 82 insertions(+), 84 deletions(-)

diff --git a/docs/components/layout-navigation/modals.md b/docs/components/layout-navigation/modals.md
index ddccfef067..ec64644466 100644
--- a/docs/components/layout-navigation/modals.md
+++ b/docs/components/layout-navigation/modals.md
@@ -79,7 +79,7 @@ import { viewChild } from '@angular/core';
         <h4 class="modal-title">Modal</h4>
         <button
           type="button"
-          class="btn btn-circle btn-ghost element-cancel"
+          class="btn btn-circle btn-tertiary-ghost element-cancel"
           aria-label="Close modal"
           (click)="modalRef.hide('cancel')"
         ></button>
diff --git a/playwright/e2e/element-examples/si-tabs-legacy.spec.ts b/playwright/e2e/element-examples/si-tabs-legacy.spec.ts
index 3fc6659fb1..93aaecb6ac 100644
--- a/playwright/e2e/element-examples/si-tabs-legacy.spec.ts
+++ b/playwright/e2e/element-examples/si-tabs-legacy.spec.ts
@@ -11,7 +11,7 @@ test.describe('si-tabs', () => {
     await si.visitExample(example);
     await page.locator('si-tabset-legacy button').getByText('Reception').click();
     await si.runVisualAndA11yTests();
-    await page.locator('si-tabset-legacy .btn-ghost.close').first().click();
+    await page.locator('si-tabset-legacy .btn-tertiary-ghost.close').first().click();
     await expect(page.locator('#si-tabset button').getByText('Reception')).toHaveCount(0);
     await si.runVisualAndA11yTests('delete');
   });
diff --git a/projects/dashboards-demo/src/app/components/widget-catalog/custom-widget-catalog.component.html b/projects/dashboards-demo/src/app/components/widget-catalog/custom-widget-catalog.component.html
index 71c902fd39..a222517eda 100644
--- a/projects/dashboards-demo/src/app/components/widget-catalog/custom-widget-catalog.component.html
+++ b/projects/dashboards-demo/src/app/components/widget-catalog/custom-widget-catalog.component.html
@@ -2,7 +2,7 @@
   <span class="modal-title">Custom Catalog</span>
   <button
     type="button"
-    class="btn btn-circle btn-ghost element-cancel"
+    class="btn btn-circle btn-tertiary-ghost element-cancel"
     aria-label="Close"
     (click)="onCancel()"
   >
diff --git a/projects/element-ng/action-modal/si-alert-dialog/si-alert-dialog.component.html b/projects/element-ng/action-modal/si-alert-dialog/si-alert-dialog.component.html
index 768904ecf2..cdbe396791 100644
--- a/projects/element-ng/action-modal/si-alert-dialog/si-alert-dialog.component.html
+++ b/projects/element-ng/action-modal/si-alert-dialog/si-alert-dialog.component.html
@@ -6,7 +6,7 @@
   <span class="modal-title" [id]="titleId()">{{ heading() | translate: translationParams() }}</span>
   <button
     type="button"
-    class="btn btn-circle btn-ghost"
+    class="btn btn-circle btn-tertiary-ghost"
     [attr.aria-label]="confirmBtnName() | translate"
     [disabled]="!!loading"
     (click)="modalRef.messageOrHide('confirm')"
diff --git a/projects/element-ng/action-modal/si-confirmation-dialog/si-confirmation-dialog.component.html b/projects/element-ng/action-modal/si-confirmation-dialog/si-confirmation-dialog.component.html
index 8558c46d8f..a1e6c6e582 100644
--- a/projects/element-ng/action-modal/si-confirmation-dialog/si-confirmation-dialog.component.html
+++ b/projects/element-ng/action-modal/si-confirmation-dialog/si-confirmation-dialog.component.html
@@ -6,7 +6,7 @@
   <span class="modal-title" [id]="titleId()">{{ heading() | translate: translationParams() }}</span>
   <button
     type="button"
-    class="btn btn-circle btn-ghost element-cancel"
+    class="btn btn-circle btn-tertiary-ghost element-cancel"
     [attr.aria-label]="declineBtnName() | translate"
     [disabled]="!!loading"
     (click)="modalRef.messageOrHide('decline')"
diff --git a/projects/element-ng/action-modal/si-delete-confirmation-dialog/si-delete-confirmation-dialog.component.html b/projects/element-ng/action-modal/si-delete-confirmation-dialog/si-delete-confirmation-dialog.component.html
index d9eee49d3a..14926c5b5e 100644
--- a/projects/element-ng/action-modal/si-delete-confirmation-dialog/si-delete-confirmation-dialog.component.html
+++ b/projects/element-ng/action-modal/si-delete-confirmation-dialog/si-delete-confirmation-dialog.component.html
@@ -6,7 +6,7 @@
   <span class="modal-title" [id]="titleId()">{{ heading() | translate: translationParams() }}</span>
   <button
     type="button"
-    class="btn btn-circle btn-ghost"
+    class="btn btn-circle btn-tertiary-ghost"
     [attr.aria-label]="cancelBtnName() | translate"
     [disabled]="!!loading"
     (click)="modalRef.messageOrHide('cancel')"
diff --git a/projects/element-ng/action-modal/si-edit-discard-dialog/si-edit-discard-dialog.component.html b/projects/element-ng/action-modal/si-edit-discard-dialog/si-edit-discard-dialog.component.html
index a1a30778de..c75efef32e 100644
--- a/projects/element-ng/action-modal/si-edit-discard-dialog/si-edit-discard-dialog.component.html
+++ b/projects/element-ng/action-modal/si-edit-discard-dialog/si-edit-discard-dialog.component.html
@@ -6,7 +6,7 @@
   <span class="modal-title" [id]="titleId()">{{ heading() | translate: translationParams() }}</span>
   <button
     type="button"
-    class="btn btn-circle btn-ghost"
+    class="btn btn-circle btn-tertiary-ghost"
     [attr.aria-label]="cancelBtnName() | translate"
     [disabled]="!!loading"
     (click)="modalRef.messageOrHide('cancel')"
diff --git a/projects/element-ng/application-header/launchpad/si-launchpad-factory.component.html b/projects/element-ng/application-header/launchpad/si-launchpad-factory.component.html
index 98dbca923b..c8e339b7a5 100644
--- a/projects/element-ng/application-header/launchpad/si-launchpad-factory.component.html
+++ b/projects/element-ng/application-header/launchpad/si-launchpad-factory.component.html
@@ -15,7 +15,7 @@
       </span>
       <button
         type="button"
-        class="btn btn-circle btn-ghost"
+        class="btn btn-circle btn-tertiary-ghost"
         [attr.aria-label]="closeText() | translate"
         (click)="closeLaunchpad()"
       >
diff --git a/projects/element-ng/chat-messages/si-ai-message.component.html b/projects/element-ng/chat-messages/si-ai-message.component.html
index 84569039dd..e13e8ad309 100644
--- a/projects/element-ng/chat-messages/si-ai-message.component.html
+++ b/projects/element-ng/chat-messages/si-ai-message.component.html
@@ -13,7 +13,7 @@
       @for (action of actions(); track $index) {
         <button
           type="button"
-          class="btn btn-ghost btn-icon"
+          class="btn btn-tertiary-ghost btn-icon"
           [disabled]="action.disabled"
           [attr.aria-label]="action.label | translate"
           (click)="action.action(actionParam(), action)"
@@ -25,7 +25,7 @@
       @if (secondaryActions().length > 0) {
         <button
           type="button"
-          class="btn btn-ghost btn-icon"
+          class="btn btn-tertiary-ghost btn-icon"
           [cdkMenuTriggerFor]="secondaryActionsMenu"
           [attr.aria-label]="secondaryActionsLabel() | translate"
           [attr.title]="secondaryActionsLabel() | translate"
diff --git a/projects/element-ng/chat-messages/si-attachment-list.component.html b/projects/element-ng/chat-messages/si-attachment-list.component.html
index 350551f276..157ef41be2 100644
--- a/projects/element-ng/chat-messages/si-attachment-list.component.html
+++ b/projects/element-ng/chat-messages/si-attachment-list.component.html
@@ -44,7 +44,7 @@
       @if (removable()) {
         <button
           type="button"
-          class="btn btn-ghost btn-icon expand-button flex-shrink-0 ms-auto align-self-center focus-inside"
+          class="btn btn-tertiary-ghost btn-icon expand-button flex-shrink-0 ms-auto align-self-center focus-inside"
           [attr.aria-label]="(removeLabel() | translate) + ' ' + attachment.name"
           (click)="remove.emit(attachment); $event.stopPropagation()"
         >
diff --git a/projects/element-ng/chat-messages/si-chat-input.component.html b/projects/element-ng/chat-messages/si-chat-input.component.html
index 1e268f23dc..c5a8596f3f 100644
--- a/projects/element-ng/chat-messages/si-chat-input.component.html
+++ b/projects/element-ng/chat-messages/si-chat-input.component.html
@@ -50,7 +50,7 @@
 
         <button
           type="button"
-          class="btn btn-ghost btn-icon"
+          class="btn btn-tertiary-ghost btn-icon"
           [attr.aria-label]="attachFileLabel() | translate"
           [disabled]="disabled()"
           (click)="fileInput.click()"
@@ -64,7 +64,7 @@
           @for (action of actions(); track $index) {
             <button
               type="button"
-              class="btn btn-ghost btn-icon"
+              class="btn btn-tertiary-ghost btn-icon"
               [disabled]="action.disabled"
               [attr.aria-label]="action.label | translate"
               (click)="action.action(actionParam(), action)"
@@ -76,7 +76,7 @@
           @if (secondaryActions().length > 0) {
             <button
               type="button"
-              class="btn btn-ghost btn-icon"
+              class="btn btn-tertiary-ghost btn-icon"
               [cdkMenuTriggerFor]="secondaryActionsMenu"
               [attr.aria-label]="secondaryActionsLabel() | translate"
               [attr.title]="secondaryActionsLabel() | translate"
@@ -97,7 +97,7 @@
 
     <button
       type="button"
-      class="btn btn-ghost btn-icon"
+      class="btn btn-tertiary-ghost btn-icon"
       [disabled]="buttonDisabled()"
       [attr.aria-label]="buttonLabel() | translate"
       (click)="onButtonClick()"
diff --git a/projects/element-ng/chat-messages/si-user-message.component.html b/projects/element-ng/chat-messages/si-user-message.component.html
index 5927285fce..b22bae2b3d 100644
--- a/projects/element-ng/chat-messages/si-user-message.component.html
+++ b/projects/element-ng/chat-messages/si-user-message.component.html
@@ -16,7 +16,7 @@
       @for (action of actions(); track $index) {
         <button
           type="button"
-          class="btn btn-ghost btn-icon"
+          class="btn btn-tertiary-ghost btn-icon"
           [disabled]="action.disabled"
           [attr.aria-label]="action.label | translate"
           (click)="action.action(actionParam(), action)"
@@ -28,7 +28,7 @@
       @if (secondaryActions().length > 0) {
         <button
           type="button"
-          class="btn btn-ghost btn-icon"
+          class="btn btn-tertiary-ghost btn-icon"
           [cdkMenuTriggerFor]="secondaryActionsMenu"
           [attr.aria-label]="secondaryActionsLabel() | translate"
           [attr.title]="secondaryActionsLabel() | translate"
diff --git a/projects/element-ng/column-selection-dialog/si-column-selection-dialog.component.html b/projects/element-ng/column-selection-dialog/si-column-selection-dialog.component.html
index b9a20382f4..837f280a4f 100644
--- a/projects/element-ng/column-selection-dialog/si-column-selection-dialog.component.html
+++ b/projects/element-ng/column-selection-dialog/si-column-selection-dialog.component.html
@@ -2,7 +2,7 @@
   <span class="modal-title" [id]="titleId()">{{ heading() | translate: translationParams() }}</span>
   <button
     type="button"
-    class="btn btn-circle btn-ghost"
+    class="btn btn-circle btn-tertiary-ghost"
     [attr.aria-label]="cancelBtnName() | translate"
     (click)="cancelColumnSelection()"
   >
diff --git a/projects/element-ng/dashboard/widgets/si-timeline-widget/si-timeline-widget-item.component.html b/projects/element-ng/dashboard/widgets/si-timeline-widget/si-timeline-widget-item.component.html
index 7016fe5f9c..c776c14a69 100644
--- a/projects/element-ng/dashboard/widgets/si-timeline-widget/si-timeline-widget-item.component.html
+++ b/projects/element-ng/dashboard/widgets/si-timeline-widget/si-timeline-widget-item.component.html
@@ -40,7 +40,7 @@
           </button>
         } @else if (action.type === 'router-link') {
           <a
-            class="d-flex btn btn-ghost"
+            class="d-flex btn btn-tertiary-ghost"
             [routerLink]="action.routerLink"
             [queryParams]="action.extras?.queryParams"
             [queryParamsHandling]="action.extras?.queryParamsHandling"
@@ -62,7 +62,7 @@
           >
         } @else if (action.type === 'link') {
           <a
-            class="d-flex btn btn-ghost"
+            class="d-flex btn btn-tertiary-ghost"
             [href]="action.href"
             [target]="action.target"
             [attr.aria-label]="action.label | translate"
diff --git a/projects/element-ng/file-uploader/si-file-uploader.component.html b/projects/element-ng/file-uploader/si-file-uploader.component.html
index c9dccf4fec..209474d1c3 100644
--- a/projects/element-ng/file-uploader/si-file-uploader.component.html
+++ b/projects/element-ng/file-uploader/si-file-uploader.component.html
@@ -74,7 +74,7 @@
         @if (file.status === 'added' || file.status === 'error' || file.status === 'invalid') {
           <button
             type="button"
-            class="btn btn-circle btn-ghost"
+            class="btn btn-circle btn-tertiary-ghost"
             [title]="removeButtonText() | translate"
             [attr.aria-label]="removeButtonText() | translate"
             (click)="removeFile($index)"
diff --git a/projects/element-ng/filter-bar/si-filter-pill.component.html b/projects/element-ng/filter-bar/si-filter-pill.component.html
index 515f51eae7..40b2a9c200 100644
--- a/projects/element-ng/filter-bar/si-filter-pill.component.html
+++ b/projects/element-ng/filter-bar/si-filter-pill.component.html
@@ -20,7 +20,7 @@
 <ng-template #remove>
   <button
     type="button"
-    class="btn-remove btn btn-circle btn-ghost focus-inside ms-0 btn-sm"
+    class="btn-remove btn btn-circle btn-tertiary-ghost focus-inside ms-0 btn-sm"
     role="button"
     aria-label="Remove"
     [disabled]="disabled()"
diff --git a/projects/element-ng/filtered-search/si-filtered-search-value.component.html b/projects/element-ng/filtered-search/si-filtered-search-value.component.html
index c07ef2e3e7..ba63d8edc2 100644
--- a/projects/element-ng/filtered-search/si-filtered-search-value.component.html
+++ b/projects/element-ng/filtered-search/si-filtered-search-value.component.html
@@ -118,7 +118,7 @@
   <div class="pill px-0 ms-n1">
     <button
       type="button"
-      class="btn btn-circle btn-sm btn-ghost focus-inside"
+      class="btn btn-circle btn-sm btn-tertiary-ghost focus-inside"
       [attr.aria-label]="clearButtonLabel() | translate"
       [disabled]="disabled()"
       (click)="clear()"
diff --git a/projects/element-ng/filtered-search/si-filtered-search.component.html b/projects/element-ng/filtered-search/si-filtered-search.component.html
index e305dd6172..7b2470ad45 100644
--- a/projects/element-ng/filtered-search/si-filtered-search.component.html
+++ b/projects/element-ng/filtered-search/si-filtered-search.component.html
@@ -53,7 +53,7 @@
   <div class="clear-button-container">
     <button
       type="button"
-      class="btn btn-icon btn-sm btn-ghost mx-2"
+      class="btn btn-icon btn-sm btn-tertiary-ghost mx-2"
       [disabled]="disabled()"
       [attr.aria-label]="clearButtonLabel() | translate"
       (click)="deleteAllCriteria($event)"
diff --git a/projects/element-ng/loading-spinner/si-loading-button.component.scss b/projects/element-ng/loading-spinner/si-loading-button.component.scss
index e4887fae45..e300f3c4ef 100644
--- a/projects/element-ng/loading-spinner/si-loading-button.component.scss
+++ b/projects/element-ng/loading-spinner/si-loading-button.component.scss
@@ -45,7 +45,7 @@ button.loading {
   --loading-spinner-color: #{variables.$element-action-warning-text};
 }
 
-:is(.btn-ghost, .btn-primary-ghost, .btn-secondary-ghost, .btn-tertiary-ghost) + .spinner-wrapper {
+:is(.btn-ghost, .btn-secondary-ghost, .btn-tertiary-ghost) + .spinner-wrapper {
   --loading-spinner-color: #{variables.$element-text-primary};
 }
 
diff --git a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.html b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.html
index 0fdc7c8b45..74dba39f54 100644
--- a/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.html
+++ b/projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.html
@@ -13,7 +13,7 @@
       <div class="mobile-drawer focus-inside navbar-vertical-no-collapse">
         <button
           type="button"
-          class="btn btn-icon btn-ghost"
+          class="btn btn-icon btn-tertiary-ghost"
           [attr.aria-label]="
             (collapsed() ? navbarExpandButtonText() : navbarCollapseButtonText()) | translate
           "
diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.html b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.html
index a13697b8f6..baf8c148d2 100644
--- a/projects/element-ng/navbar-vertical/si-navbar-vertical.component.html
+++ b/projects/element-ng/navbar-vertical/si-navbar-vertical.component.html
@@ -13,7 +13,7 @@
       <div class="mobile-drawer focus-inside navbar-vertical-no-collapse">
         <button
           type="button"
-          class="btn btn-icon btn-ghost"
+          class="btn btn-icon btn-tertiary-ghost"
           [attr.aria-label]="
             (collapsed() ? navbarExpandButtonText() : navbarCollapseButtonText()) | translate
           "
diff --git a/projects/element-ng/notification-item/si-notification-item.component.html b/projects/element-ng/notification-item/si-notification-item.component.html
index 1f77547424..dc35f16c00 100644
--- a/projects/element-ng/notification-item/si-notification-item.component.html
+++ b/projects/element-ng/notification-item/si-notification-item.component.html
@@ -112,7 +112,7 @@
 <ng-template #actionButton let-action>
   <button
     type="button"
-    class="btn btn-ghost btn-icon"
+    class="btn btn-tertiary-ghost btn-icon"
     [attr.aria-label]="action.ariaLabel"
     (click)="action.action(action)"
   >
@@ -122,7 +122,7 @@
 
 <ng-template #routerLink let-action>
   <a
-    class="btn btn-ghost p-2 btn-icon"
+    class="btn btn-tertiary-ghost p-2 btn-icon"
     [routerLink]="action.routerLink"
     [queryParams]="action.extras?.queryParams"
     [queryParamsHandling]="action.extras?.queryParamsHandling"
@@ -140,7 +140,7 @@
 
 <ng-template #link let-action>
   <a
-    class="btn btn-ghost p-2 btn-icon"
+    class="btn btn-tertiary-ghost p-2 btn-icon"
     [href]="action.href"
     [target]="action.target"
     [attr.aria-label]="action.ariaLabel"
@@ -152,7 +152,7 @@
 <ng-template #menu let-action>
   <button
     type="button"
-    class="btn btn-ghost btn-icon"
+    class="btn btn-tertiary-ghost btn-icon"
     [attr.aria-label]="heading() + ' dropdown'"
     [cdkMenuTriggerFor]="actionMenu"
   >
diff --git a/projects/element-ng/photo-upload/si-photo-upload.component.html b/projects/element-ng/photo-upload/si-photo-upload.component.html
index c3a068dea1..426e291462 100644
--- a/projects/element-ng/photo-upload/si-photo-upload.component.html
+++ b/projects/element-ng/photo-upload/si-photo-upload.component.html
@@ -61,7 +61,7 @@
     <h4 class="modal-title" [id]="titleId">{{ modalHeader() | translate }}</h4>
     <button
       type="button"
-      class="btn btn-circle btn-ghost"
+      class="btn btn-circle btn-tertiary-ghost"
       [attr.aria-label]="cancelEditText() | translate"
       (click)="imageCropperCanceled()"
     >
diff --git a/projects/element-ng/pills-input/si-input-pill.component.html b/projects/element-ng/pills-input/si-input-pill.component.html
index 23a534bd35..499914e51e 100644
--- a/projects/element-ng/pills-input/si-input-pill.component.html
+++ b/projects/element-ng/pills-input/si-input-pill.component.html
@@ -2,7 +2,11 @@
   <ng-content />
 </div>
 @if (!hideClose()) {
-  <span class="ms-2 btn btn-circle btn-sm btn-ghost" aria-hidden="true" (click)="deletePill.emit()">
+  <span
+    class="ms-2 btn btn-circle btn-sm btn-tertiary-ghost"
+    aria-hidden="true"
+    (click)="deletePill.emit()"
+  >
     <si-icon [icon]="icons.elementCancel" />
   </span>
 }
diff --git a/projects/element-ng/pills-input/si-pills-input.component.spec.ts b/projects/element-ng/pills-input/si-pills-input.component.spec.ts
index 677de6bede..b45bf9efff 100644
--- a/projects/element-ng/pills-input/si-pills-input.component.spec.ts
+++ b/projects/element-ng/pills-input/si-pills-input.component.spec.ts
@@ -88,11 +88,11 @@ describe('SiPillsInputComponent', () => {
       fixture.detectChanges();
       await fixture.whenStable();
       fixture.detectChanges();
-      componentElement.querySelectorAll<HTMLElement>('.btn-ghost')![1].click();
+      componentElement.querySelectorAll<HTMLElement>('.btn-tertiary-ghost')![1].click();
       expect(component.value).toEqual(['item-1']);
       fixture.detectChanges();
       await fixture.whenStable();
-      componentElement.querySelector<HTMLElement>('.btn-ghost')!.click();
+      componentElement.querySelector<HTMLElement>('.btn-tertiary-ghost')!.click();
       expect(component.value).toEqual([]);
     });
 
diff --git a/projects/element-ng/search-bar/si-search-bar.component.html b/projects/element-ng/search-bar/si-search-bar.component.html
index 48eecc9740..780c6551a6 100644
--- a/projects/element-ng/search-bar/si-search-bar.component.html
+++ b/projects/element-ng/search-bar/si-search-bar.component.html
@@ -21,7 +21,7 @@
   @if (searchValue()) {
     <button
       type="button"
-      class="btn btn-icon btn-sm btn-ghost cancel-button"
+      class="btn btn-icon btn-sm btn-tertiary-ghost cancel-button"
       [attr.aria-label]="clearButtonAriaLabel() | translate"
       [disabled]="disabled() || readonly()"
       (click)="resetForm()"
diff --git a/projects/element-ng/side-panel/si-side-panel-content.component.html b/projects/element-ng/side-panel/si-side-panel-content.component.html
index 3044e03f0d..0ac3afaf7b 100644
--- a/projects/element-ng/side-panel/si-side-panel-content.component.html
+++ b/projects/element-ng/side-panel/si-side-panel-content.component.html
@@ -14,7 +14,7 @@
     @if (displayMode() === 'navigate' && navigateConfig) {
       @if (navigateConfig.type === 'router-link') {
         <a
-          class="btn btn-icon btn-ghost auto-hide"
+          class="btn btn-icon btn-tertiary-ghost auto-hide"
           [class.ms-4]="collapsible()"
           [class.mx-4]="!collapsible() || service.isTemporaryOpen()"
           [routerLink]="navigateConfig.routerLink"
@@ -35,7 +35,7 @@
         >
       } @else if (navigateConfig.type === 'link') {
         <a
-          class="btn btn-icon btn-ghost auto-hide"
+          class="btn btn-icon btn-tertiary-ghost auto-hide"
           [class.ms-4]="collapsible()"
           [class.mx-4]="!collapsible()"
           [href]="navigateConfig.href"
@@ -53,7 +53,7 @@
     @if (displayMode() === 'overlay') {
       <button
         type="button"
-        class="fullscreen-button btn btn-icon btn-ghost auto-hide"
+        class="fullscreen-button btn btn-icon btn-tertiary-ghost auto-hide"
         [class.ms-4]="collapsible()"
         [class.mx-4]="!collapsible() || service.isTemporaryOpen()"
         [attr.aria-label]="
@@ -67,7 +67,7 @@
     }
     <button
       type="button"
-      class="close-button btn btn-icon btn-ghost me-4"
+      class="close-button btn btn-icon btn-tertiary-ghost me-4"
       [attr.aria-label]="closeButtonLabel() | translate"
       [tabindex]="focusable() ? '0' : '-1'"
       (click)="toggleSidePanel($event)"
@@ -77,7 +77,7 @@
     <div class="collapse-toggle">
       <button
         type="button"
-        class="side-panel-collapse-toggle btn btn-icon btn-ghost mx-4"
+        class="side-panel-collapse-toggle btn btn-icon btn-tertiary-ghost mx-4"
         [attr.aria-label]="toggleItemLabel() | translate"
         (click)="toggleSidePanel($event)"
       >
diff --git a/projects/element-ng/tabs-legacy/si-tabset/si-tabset-legacy.component.html b/projects/element-ng/tabs-legacy/si-tabset/si-tabset-legacy.component.html
index da88c99c51..bf56713f04 100644
--- a/projects/element-ng/tabs-legacy/si-tabset/si-tabset-legacy.component.html
+++ b/projects/element-ng/tabs-legacy/si-tabset/si-tabset-legacy.component.html
@@ -61,7 +61,7 @@
           }
           @if (tab.closable && !tab.disabled) {
             <si-icon
-              class="ms-2 btn btn-circle btn-sm btn-ghost close"
+              class="ms-2 btn btn-circle btn-sm btn-tertiary-ghost close"
               [icon]="icons.elementCancel"
               (click)="closeTab($event, tab)"
             />
diff --git a/projects/element-ng/tabs/si-tab.component.html b/projects/element-ng/tabs/si-tab.component.html
index 9f7ecdff02..d95f873e95 100644
--- a/projects/element-ng/tabs/si-tab.component.html
+++ b/projects/element-ng/tabs/si-tab.component.html
@@ -7,7 +7,7 @@
 <si-tab-badge [badgeColor]="badgeColor()" [badgeContent]="badgeContent()" />
 @if (closable() && !disabledTab()) {
   <si-icon
-    class="ms-2 btn btn-circle btn-sm btn-ghost close"
+    class="ms-2 btn btn-circle btn-sm btn-tertiary-ghost close"
     [icon]="icons.elementCancel"
     (click)="closeTab($event)"
   />
diff --git a/projects/element-ng/threshold/si-threshold.component.html b/projects/element-ng/threshold/si-threshold.component.html
index e2aeffea2f..291d255500 100644
--- a/projects/element-ng/threshold/si-threshold.component.html
+++ b/projects/element-ng/threshold/si-threshold.component.html
@@ -5,7 +5,7 @@
         @if (showAddRemoveButtons()) {
           <button
             type="button"
-            class="btn btn-circle btn-ghost m-4"
+            class="btn btn-circle btn-tertiary-ghost m-4"
             [attr.aria-label]="deleteAriaLabel() | translate"
             (click)="deleteStep($index)"
           >
diff --git a/projects/element-ng/toast-notification/si-toast-notification/si-toast-notification.component.html b/projects/element-ng/toast-notification/si-toast-notification/si-toast-notification.component.html
index da25bc4c28..d0b8a4190e 100644
--- a/projects/element-ng/toast-notification/si-toast-notification/si-toast-notification.component.html
+++ b/projects/element-ng/toast-notification/si-toast-notification/si-toast-notification.component.html
@@ -31,7 +31,7 @@
     <button
       type="button"
       tabindex="0"
-      class="btn btn-icon btn-ghost mt-n2 me-n2"
+      class="btn btn-icon btn-tertiary-ghost mt-n2 me-n2"
       [attr.aria-label]="closeAriaLabel() | translate"
       (keydown.enter)="close()"
       (click)="close()"
diff --git a/projects/element-ng/tour/si-tour.component.html b/projects/element-ng/tour/si-tour.component.html
index 60a728b5d7..8c1a3535f4 100644
--- a/projects/element-ng/tour/si-tour.component.html
+++ b/projects/element-ng/tour/si-tour.component.html
@@ -28,7 +28,7 @@
       </div>
       <button
         type="button"
-        class="btn btn-circle btn-ghost mt-4 me-5"
+        class="btn btn-circle btn-tertiary-ghost mt-4 me-5"
         [attr.aria-label]="ariaLabelClose | translate"
         (click)="action('cancel')"
       >
diff --git a/projects/element-theme/src/styles/bootstrap/_buttons.scss b/projects/element-theme/src/styles/bootstrap/_buttons.scss
index f23afe5136..d320f0fed9 100644
--- a/projects/element-theme/src/styles/bootstrap/_buttons.scss
+++ b/projects/element-theme/src/styles/bootstrap/_buttons.scss
@@ -101,11 +101,7 @@ button {
   --btn-color-active: #{semantic-tokens.$element-action-warning-text};
 }
 
-// FIXME: Before the ghost variants were introduced, the .btn-ghost styling matched the tertiary styling.
-// To avoid a breaking change, the class .btn-primary-ghost has been added which deviates from the usual button naming convention.
-// With the next major release, the .btn-primary-ghost class should be removed so that the ghost buttons match the button naming convention
-// and schematics should update .btn-ghost to .btn-tertiary-ghost.
-.btn-primary-ghost {
+.btn-ghost {
   --btn-bg: #{semantic-tokens.$element-base-1};
   --btn-bg-hover: #{semantic-tokens.$element-base-1-hover};
   --btn-bg-active: #{semantic-tokens.$element-base-1-selected};
@@ -133,8 +129,7 @@ button {
 .btn-tertiary,
 .btn-tertiary-warning,
 .btn-tertiary-danger,
-.btn-tertiary-ghost,
-.btn-ghost {
+.btn-tertiary-ghost {
   --btn-bg: transparent;
   --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
   --btn-bg-active: #{semantic-tokens.$element-action-secondary-active};
@@ -168,8 +163,7 @@ button {
 }
 
 .btn-secondary-ghost,
-.btn-tertiary-ghost,
-.btn-ghost {
+.btn-tertiary-ghost {
   --btn-bg-hover: #{semantic-tokens.$element-base-1-hover};
   --btn-bg-active: #{semantic-tokens.$element-base-1-selected};
   --btn-color: #{semantic-tokens.$element-text-primary};
diff --git a/src/app/examples/buttons/button-groups.html b/src/app/examples/buttons/button-groups.html
index 989df65956..a8f043e403 100644
--- a/src/app/examples/buttons/button-groups.html
+++ b/src/app/examples/buttons/button-groups.html
@@ -126,13 +126,13 @@ <h4 class="mb-4">With icons</h4>
     </div>
 
     <div class="btn-group" role="group" aria-label="Ghost group">
-      <button type="button" class="btn btn-icon btn-ghost" aria-label="Edit">
+      <button type="button" class="btn btn-icon btn-tertiary-ghost" aria-label="Edit">
         <si-icon class="icon" icon="element-edit" />
       </button>
-      <button type="button" class="btn btn-icon btn-ghost" aria-label="Copy">
+      <button type="button" class="btn btn-icon btn-tertiary-ghost" aria-label="Copy">
         <si-icon class="icon" icon="element-copy" />
       </button>
-      <button type="button" class="btn btn-icon btn-ghost" aria-label="Delete">
+      <button type="button" class="btn btn-icon btn-tertiary-ghost" aria-label="Delete">
         <si-icon class="icon" icon="element-delete" />
       </button>
     </div>
diff --git a/src/app/examples/buttons/buttons.html b/src/app/examples/buttons/buttons.html
index 1e8c8a8cd0..08216543c5 100644
--- a/src/app/examples/buttons/buttons.html
+++ b/src/app/examples/buttons/buttons.html
@@ -4,7 +4,7 @@
       <button type="button" class="btn btn-primary" [disabled]="disabled">Default</button>
       <button type="button" class="btn btn-warning" [disabled]="disabled">Warning</button>
       <button type="button" class="btn btn-danger" [disabled]="disabled">Danger</button>
-      <button type="button" class="btn btn-primary-ghost" [disabled]="disabled">Ghost</button>
+      <button type="button" class="btn btn-ghost" [disabled]="disabled">Ghost</button>
       <button type="button" class="btn btn-secondary" [disabled]="disabled">Secondary</button>
       <button type="button" class="btn btn-secondary-warning" [disabled]="disabled">
         Warning
@@ -30,7 +30,7 @@ <h4 class="mb-4">Buttons with icons</h4>
       <button type="button" class="btn btn-danger" [disabled]="disabled">
         <i aria-hidden="true" class="icon element-delete"></i>Danger
       </button>
-      <button type="button" class="btn btn-primary-ghost" [disabled]="disabled">
+      <button type="button" class="btn btn-ghost" [disabled]="disabled">
         <i aria-hidden="true" class="icon element-download"></i>Ghost
       </button>
       <button type="button" class="btn btn-secondary" [disabled]="disabled">
@@ -75,7 +75,7 @@ <h4 class="mb-4">Icon buttons</h4>
 
       <button
         type="button"
-        class="btn btn-icon btn-primary-ghost"
+        class="btn btn-icon btn-ghost"
         aria-label="rocket"
         [disabled]="disabled"
       >
@@ -140,7 +140,7 @@ <h4 class="mb-4">Icon buttons</h4>
 
       <button
         type="button"
-        class="btn btn-icon btn-ghost element-delete"
+        class="btn btn-icon btn-tertiary-ghost element-delete"
         aria-label="ghost delete"
         [disabled]="disabled"
       ></button>
@@ -180,7 +180,7 @@ <h4 class="mb-4">Circle buttons</h4>
 
       <button
         type="button"
-        class="btn btn-circle btn-primary-ghost element-rocket"
+        class="btn btn-circle btn-ghost element-rocket"
         aria-label="rocket"
         [disabled]="disabled"
       ></button>
@@ -243,7 +243,7 @@ <h4 class="mb-4">Circle buttons</h4>
 
       <button
         type="button"
-        class="btn btn-circle btn-ghost element-delete"
+        class="btn btn-circle btn-tertiary-ghost element-delete"
         aria-label="ghost delete"
         [disabled]="disabled"
       ></button>
@@ -333,7 +333,7 @@ <h4 class="mb-4">Button links</h4>
       <a class="btn btn-danger" href="#">
         <i aria-hidden="true" class="icon element-link"></i>Danger Link
       </a>
-      <a class="btn btn-primary-ghost" href="#">
+      <a class="btn btn-ghost" href="#">
         <i aria-hidden="true" class="icon element-link"></i>Ghost Link
       </a>
       <a class="btn btn-secondary" href="#">
diff --git a/src/app/examples/si-chat-messages/si-attachment-list.html b/src/app/examples/si-chat-messages/si-attachment-list.html
index 1a541bf4fe..299f3e2eff 100644
--- a/src/app/examples/si-chat-messages/si-attachment-list.html
+++ b/src/app/examples/si-chat-messages/si-attachment-list.html
@@ -17,7 +17,7 @@
     <h4 class="modal-title" id="sample-modal-title">{{ attachment.name }}</h4>
     <button
       type="button"
-      class="btn btn-circle btn-ghost element-cancel"
+      class="btn btn-circle btn-tertiary-ghost element-cancel"
       aria-label="Close modal"
       (click)="modalRef.hide('cancel')"
     >
diff --git a/src/app/examples/si-chat-messages/si-chat-container.html b/src/app/examples/si-chat-messages/si-chat-container.html
index 897245ce7d..17efd9cfdb 100644
--- a/src/app/examples/si-chat-messages/si-chat-container.html
+++ b/src/app/examples/si-chat-messages/si-chat-container.html
@@ -28,7 +28,7 @@
           @for (action of message.actions; track $index) {
             <button
               type="button"
-              class="btn btn-ghost btn-circle"
+              class="btn btn-tertiary-ghost btn-circle"
               siChatMessageAction
               [attr.aria-label]="action.label"
               (click)="action.action(message, action)"
@@ -100,7 +100,7 @@
     <h4 class="modal-title" id="sample-modal-title">{{ attachment.name }}</h4>
     <button
       type="button"
-      class="btn btn-circle btn-ghost element-cancel"
+      class="btn btn-circle btn-tertiary-ghost element-cancel"
       aria-label="Close modal"
       (click)="modalRef.hide('cancel')"
     >
diff --git a/src/app/examples/si-chat-messages/si-chat-input.html b/src/app/examples/si-chat-messages/si-chat-input.html
index 685f1345c0..8fb8445e43 100644
--- a/src/app/examples/si-chat-messages/si-chat-input.html
+++ b/src/app/examples/si-chat-messages/si-chat-input.html
@@ -24,7 +24,7 @@
     <!-- Custom actions via ng-content slot -->
     <button
       type="button"
-      class="btn btn-ghost btn-icon"
+      class="btn btn-tertiary-ghost btn-icon"
       title="Insert emoji"
       (click)="logEvent('Emoji picker clicked')"
     >
diff --git a/src/app/examples/si-chat-messages/si-chat-message.html b/src/app/examples/si-chat-messages/si-chat-message.html
index 88f2d6c76d..5b7c810f3e 100644
--- a/src/app/examples/si-chat-messages/si-chat-message.html
+++ b/src/app/examples/si-chat-messages/si-chat-message.html
@@ -8,7 +8,7 @@
     @for (action of actions; track $index) {
       <button
         type="button"
-        class="btn btn-ghost btn-circle"
+        class="btn btn-tertiary-ghost btn-circle"
         siChatMessageAction
         [disabled]="action.disabled"
         [attr.aria-label]="action.label | translate"
@@ -19,7 +19,7 @@
     }
     <button
       type="button"
-      class="btn btn-ghost btn-circle"
+      class="btn btn-tertiary-ghost btn-circle"
       siChatMessageAction
       [cdkMenuTriggerFor]="secondaryActionsMenu"
       [attr.aria-label]="secondaryActionsLabel | translate"
@@ -40,7 +40,7 @@
       @for (action of actions; track $index) {
         <button
           type="button"
-          class="btn btn-ghost btn-circle"
+          class="btn btn-tertiary-ghost btn-circle"
           siChatMessageAction
           [disabled]="action.disabled"
           [attr.aria-label]="action.label | translate"
diff --git a/src/app/examples/si-dashboard/si-timeline-widget-body.ts b/src/app/examples/si-dashboard/si-timeline-widget-body.ts
index 0b2ca62bf4..ad62e5e5b2 100644
--- a/src/app/examples/si-dashboard/si-timeline-widget-body.ts
+++ b/src/app/examples/si-dashboard/si-timeline-widget-body.ts
@@ -39,7 +39,7 @@ export class SampleComponent implements OnInit {
         type: 'action',
         label: 'Copy',
         icon: 'element-copy',
-        customClass: 'btn-ghost',
+        customClass: 'btn-tertiary-ghost',
         action: item => this.logEvent(`Action clicked: ${item.label}`)
       }
     },
diff --git a/src/app/examples/si-dashboard/si-timeline-widget.ts b/src/app/examples/si-dashboard/si-timeline-widget.ts
index 58cd95d8d8..794f59ec43 100644
--- a/src/app/examples/si-dashboard/si-timeline-widget.ts
+++ b/src/app/examples/si-dashboard/si-timeline-widget.ts
@@ -244,7 +244,7 @@ export class SampleComponent implements OnInit {
         type: 'action',
         label: 'Copy',
         icon: 'element-copy',
-        customClass: 'btn-ghost',
+        customClass: 'btn-tertiary-ghost',
         action: item => this.logEvent(`Action clicked: ${item.label}`)
       }
     },
diff --git a/src/app/examples/si-datepicker/si-modal-service.html b/src/app/examples/si-datepicker/si-modal-service.html
index 8377590e21..846b1dfd87 100644
--- a/src/app/examples/si-datepicker/si-modal-service.html
+++ b/src/app/examples/si-datepicker/si-modal-service.html
@@ -6,7 +6,7 @@
     <h4 class="modal-title" id="sample-modal-title">Modal</h4>
     <button
       type="button"
-      class="btn btn-circle btn-ghost element-cancel"
+      class="btn btn-circle btn-tertiary-ghost element-cancel"
       aria-label="Close modal"
       (click)="modalRef.hide()"
     >
diff --git a/src/app/examples/si-list-details/si-list-details-router.html b/src/app/examples/si-list-details/si-list-details-router.html
index cd0159143b..7d4179adc5 100644
--- a/src/app/examples/si-list-details/si-list-details-router.html
+++ b/src/app/examples/si-list-details/si-list-details-router.html
@@ -38,7 +38,7 @@
       />
       <button
         type="button"
-        class="btn btn-circle btn-ghost element-filter me-2"
+        class="btn btn-circle btn-tertiary-ghost element-filter me-2"
         aria-label="Filters"
         (click)="logEvent('Filters')"
       ></button>
diff --git a/src/app/examples/si-list-details/si-list-details.html b/src/app/examples/si-list-details/si-list-details.html
index d18db6d3b0..1da536210e 100644
--- a/src/app/examples/si-list-details/si-list-details.html
+++ b/src/app/examples/si-list-details/si-list-details.html
@@ -38,7 +38,7 @@
       />
       <button
         type="button"
-        class="btn btn-icon btn-ghost element-filter me-2"
+        class="btn btn-icon btn-tertiary-ghost element-filter me-2"
         aria-label="Filters"
         (click)="logEvent('Filters')"
       ></button>
diff --git a/src/app/examples/si-loading-spinner/si-loading-button.html b/src/app/examples/si-loading-spinner/si-loading-button.html
index 1387edcd67..c38c979916 100644
--- a/src/app/examples/si-loading-spinner/si-loading-button.html
+++ b/src/app/examples/si-loading-spinner/si-loading-button.html
@@ -69,7 +69,7 @@
     (click)="handleClick('circle button')"
   />
   <si-loading-button
-    buttonClass="btn btn-circle btn-lg btn-ghost element-delete"
+    buttonClass="btn btn-circle btn-lg btn-tertiary-ghost element-delete"
     ariaLabel="clock"
     [loading]="loading"
     (click)="handleClick('ghost button')"
diff --git a/src/app/examples/si-map/si-map-custom-cluster-popover.ts b/src/app/examples/si-map/si-map-custom-cluster-popover.ts
index 2d3fa86222..18f44392f0 100644
--- a/src/app/examples/si-map/si-map-custom-cluster-popover.ts
+++ b/src/app/examples/si-map/si-map-custom-cluster-popover.ts
@@ -23,7 +23,7 @@ import { environment } from 'src/environments/environment';
           </div>
           <button
             type="button"
-            class="btn btn-circle btn-ghost me-2 align-self-center"
+            class="btn btn-circle btn-tertiary-ghost me-2 align-self-center"
             aria-label="Show details"
             (click)="pointClick(point)"
           >
diff --git a/src/app/examples/si-modals/app-table.component.html b/src/app/examples/si-modals/app-table.component.html
index ca6685116a..92de568f67 100644
--- a/src/app/examples/si-modals/app-table.component.html
+++ b/src/app/examples/si-modals/app-table.component.html
@@ -3,7 +3,7 @@
     <h4 class="modal-title">Modal with table</h4>
     <button
       type="button"
-      class="btn btn-circle btn-ghost element-cancel"
+      class="btn btn-circle btn-tertiary-ghost element-cancel"
       aria-label="Close modal"
       (click)="modalRef.hide()"
     >
diff --git a/src/app/examples/si-modals/si-modal-service.html b/src/app/examples/si-modals/si-modal-service.html
index ffa6c895b2..4d0e1508bf 100644
--- a/src/app/examples/si-modals/si-modal-service.html
+++ b/src/app/examples/si-modals/si-modal-service.html
@@ -29,7 +29,7 @@
     <h4 class="modal-title" id="sample-modal-title">Modal</h4>
     <button
       type="button"
-      class="btn btn-circle btn-ghost element-cancel"
+      class="btn btn-circle btn-tertiary-ghost element-cancel"
       aria-label="Close modal"
       (click)="modalRef.hide('cancel')"
     >
@@ -49,7 +49,7 @@ <h4 class="modal-title" id="sample-modal-title">Modal</h4>
     <h4 class="modal-title" id="sample-modal-title-parent">Modal</h4>
     <button
       type="button"
-      class="btn btn-circle btn-ghost element-cancel"
+      class="btn btn-circle btn-tertiary-ghost element-cancel"
       aria-label="Close modal"
       (click)="parentModalRef.hide('cancel')"
     >
@@ -75,7 +75,7 @@ <h4 class="modal-title" id="sample-modal-title-parent">Modal</h4>
     <h4 class="modal-title" id="sample-modal-title">Modal</h4>
     <button
       type="button"
-      class="btn btn-circle btn-ghost element-cancel"
+      class="btn btn-circle btn-tertiary-ghost element-cancel"
       aria-label="Close modal"
       (click)="iconModalRef.hide('cancel')"
     >
diff --git a/src/app/examples/si-wizard/si-wizard-forms.html b/src/app/examples/si-wizard/si-wizard-forms.html
index 5f2fbe3111..fd4ce3dafc 100644
--- a/src/app/examples/si-wizard/si-wizard-forms.html
+++ b/src/app/examples/si-wizard/si-wizard-forms.html
@@ -5,7 +5,7 @@
     <h4 class="modal-title" id="sample-modal-title">Title</h4>
     <button
       type="button"
-      class="btn btn-circle btn-ghost element-cancel"
+      class="btn btn-circle btn-tertiary-ghost element-cancel"
       aria-label="Close modal"
       (click)="modalRef?.hide('cancel')"
     >