diff --git a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode-element-examples-chromium-light-linux.png b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode-element-examples-chromium-light-linux.png
index 54cbb4558..748e5e602 100644
--- a/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-side-panel.spec.ts-snapshots/si-side-panel--si-side-panel--scroll-mode-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f0fe3fe6b776d092f8d3f695c56020b33216181caaed77dcab0e99982a78e62d
-size 89206
+oid sha256:8be17067ccd0795d99b001e03b7cc1ba71772fe0077dca4b031f83a996bfc5b3
+size 89203
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 1f9182331..70c2260ba 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:fd146edcc34cddc996fbb657e80e4b64e40636b0829bbb465fc6b34994ef2b91
-size 43908
+oid sha256:8a23ebc6ae565fa9ae317e571f23a30060f33372dac88dad28ea23018a200938
+size 62745
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 d922761d6..afa274482 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:e72a5fef1209e662de1807833cc48270befe5d1fea76521ccd5c811c2752a2a3
-size 44407
+oid sha256:ddbc9f405eb70a739d554ee8a0ad6c3e1749ba922c098b1f363fda50890fefc3
+size 66515
diff --git a/playwright/snapshots/static.spec.ts-snapshots/buttons--buttons.yaml b/playwright/snapshots/static.spec.ts-snapshots/buttons--buttons.yaml
index d96972cd9..9f5ddc911 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/buttons--buttons.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/buttons--buttons.yaml
@@ -4,44 +4,65 @@
 - button "Secondary"
 - button "Warning"
 - button "Danger"
-- button "Input"
 - button "Tertiary"
 - button "Warning"
 - button "Danger"
+- heading "Buttons with icons" [level=4]
 - button "Default"
 - button "Warning"
 - button "Danger"
 - button "Secondary"
-- button /\d+\.\d+\.\d+ - \d+\.\d+\.\d+/
 - button "Tertiary"
+- heading "Input buttons" [level=4]
+- button "Input"
+- button /\d+\.\d+\.\d+ - \d+\.\d+\.\d+/
+- heading "Icon buttons" [level=4]
 - button "clock"
 - button "bath"
 - button "library"
-- button "badge"
-- button "badge"
-- button "badge"
-- button "badge"
-- button "badge"
-- button "badge"
+- button "secondary badge"
+- button "secondary warning badge"
+- button "secondary danger badge"
+- button "tertiary badge"
+- button "tertiary warning badge"
+- button "tertiary danger badge"
 - button "delete"
+- button "close"
+- button "close"
+- heading "Circle buttons" [level=4]
 - button "clock"
 - button "bath"
 - button "library"
-- button "badge"
-- button "badge"
+- button "secondary badge"
+- button "secondary warning badge"
+- button "secondary danger badge"
+- button "tertiary badge"
+- button "tertiary warning badge"
+- button "tertiary danger badge"
 - button "delete"
-- button "btn-sm"
-- button "default"
-- button "btn-lg"
-- link "Go back":
+- button "close"
+- button "close"
+- heading "Button sizing" [level=4]
+- button "Large"
+- button "Default"
+- button "Small"
+- heading "Icon button sizing" [level=4]
+- button "default icon button"
+- button "default circle button"
+- button "small icon button"
+- button "small circle button"
+- button "extra small icon button"
+- button "extra small circle button"
+- heading "Button links" [level=4]
+- link "Primary Link":
   - /url: "#"
-- link "Go back":
+- link "Warning Link":
   - /url: "#"
-- link "Go back":
+- link "Danger Link":
   - /url: "#"
-- link "Go back":
+- link "Secondary Link":
   - /url: "#"
-- link "Go back":
+- link "Tertiary Link":
   - /url: "#"
-- checkbox "Disable all buttons"
+- switch "Disable all buttons"
 - text: Disable all buttons
\ No newline at end of file
diff --git a/projects/element-theme/src/styles/bootstrap/_button-group.scss b/projects/element-theme/src/styles/bootstrap/_button-group.scss
index cc28b95ff..9e76a07d7 100644
--- a/projects/element-theme/src/styles/bootstrap/_button-group.scss
+++ b/projects/element-theme/src/styles/bootstrap/_button-group.scss
@@ -52,6 +52,11 @@
     margin-inline-start: -1px;
   }
 
+  .btn-icon {
+    inline-size: unset;
+    padding-inline: calc(#{map.get(spacers.$spacers, 2)} - var(--btn-border-width, 0px));
+  }
+
   // Dropdown toggle styling for split buttons
   .btn.dropdown-toggle {
     inline-size: 24px;
diff --git a/projects/element-theme/src/styles/bootstrap/_buttons.scss b/projects/element-theme/src/styles/bootstrap/_buttons.scss
index 17b6bb318..8d6821171 100644
--- a/projects/element-theme/src/styles/bootstrap/_buttons.scss
+++ b/projects/element-theme/src/styles/bootstrap/_buttons.scss
@@ -64,14 +64,6 @@ button {
     margin-block: -#{map.get(spacers.$spacers, 2)};
     margin-inline: -#{map.get(spacers.$spacers, 2)} #{map.get(spacers.$spacers, 2)};
   }
-
-  &.btn-icon {
-    padding-inline: calc(#{map.get(spacers.$spacers, 2)} - var(--btn-border-width, 0px));
-
-    .icon {
-      margin-inline: 0;
-    }
-  }
 }
 
 .btn:not(:is(.btn-circle, .btn-link, .btn-close, .btn-icon)) {
@@ -156,15 +148,28 @@ button {
   }
 }
 
-// Circle Buttons
+// Icon buttons with circle variant
 // --------------
-:is(.btn-circle, .btn-close) {
-  padding: 0 !important; // stylelint-disable-line declaration-no-important
-  border-radius: 50%;
+.btn:is(.btn-circle, .btn-icon, .btn-close) {
+  display: inline-flex;
+  padding: 0;
   flex-shrink: 0;
+
+  .icon {
+    margin-inline: 0;
+  }
+}
+
+.btn-icon {
+  border-radius: semantic-tokens.$element-button-radius;
 }
 
 .btn-circle {
+  border-radius: 50%;
+}
+
+.btn-circle,
+.btn-icon {
   &,
   &.btn-lg {
     @include button-circle-size($btn-circle-size-default, $btn-circle-font-size-default);
@@ -185,6 +190,7 @@ button {
 }
 
 .btn-circle.btn-ghost,
+.btn-icon.btn-ghost,
 .btn-close {
   --btn-bg: transparent;
   --btn-bg-hover: #{semantic-tokens.$element-action-secondary-hover};
@@ -192,6 +198,11 @@ button {
   --btn-color-hover: #{semantic-tokens.$element-ui-1};
 }
 
+.btn-close.btn-tertiary {
+  --btn-color: #{semantic-tokens.$element-action-secondary-text};
+  --btn-color-hover: #{semantic-tokens.$element-action-secondary-text-hover};
+}
+
 .btn-lg {
   font-size: bootstrap-variables.$btn-font-size-lg;
   line-height: 1.5;
@@ -211,7 +222,6 @@ button {
   &::before {
     content: '\002715';
     font-size: 1rem;
-    margin-block-start: 2px;
   }
 
   > * {
diff --git a/src/app/examples/buttons/button-groups.html b/src/app/examples/buttons/button-groups.html
index e8ec48a10..07561b116 100644
--- a/src/app/examples/buttons/button-groups.html
+++ b/src/app/examples/buttons/button-groups.html
@@ -42,37 +42,37 @@
 
   <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">
+      <button type="button" class="btn btn-icon btn-sm btn-primary" aria-label="Edit">
         <i class="icon element-edit"></i>
       </button>
-      <button type="button" class="btn btn-icon btn-primary" aria-label="Copy">
+      <button type="button" class="btn btn-icon btn-sm btn-primary" aria-label="Copy">
         <i class="icon element-copy"></i>
       </button>
-      <button type="button" class="btn btn-icon btn-primary" aria-label="Delete">
+      <button type="button" class="btn btn-icon btn-sm btn-primary" aria-label="Delete">
         <i class="icon element-delete"></i>
       </button>
     </div>
 
     <div class="btn-group" role="group" aria-label="Secondary group">
-      <button type="button" class="btn btn-icon btn-secondary" aria-label="Edit">
+      <button type="button" class="btn btn-icon btn-sm btn-secondary" aria-label="Edit">
         <i class="icon element-edit"></i>
       </button>
-      <button type="button" class="btn btn-icon btn-secondary" aria-label="Copy">
+      <button type="button" class="btn btn-icon btn-sm btn-secondary" aria-label="Copy">
         <i class="icon element-copy"></i>
       </button>
-      <button type="button" class="btn btn-icon btn-secondary" aria-label="Delete">
+      <button type="button" class="btn btn-icon btn-sm btn-secondary" aria-label="Delete">
         <i class="icon element-delete"></i>
       </button>
     </div>
 
     <div class="btn-group" role="group" aria-label="Tertiary group">
-      <button type="button" class="btn btn-icon btn-tertiary" aria-label="Edit">
+      <button type="button" class="btn btn-icon btn-sm btn-tertiary" aria-label="Edit">
         <i class="icon element-edit"></i>
       </button>
-      <button type="button" class="btn btn-icon btn-tertiary" aria-label="Copy">
+      <button type="button" class="btn btn-icon btn-sm btn-tertiary" aria-label="Copy">
         <i class="icon element-copy"></i>
       </button>
-      <button type="button" class="btn btn-icon btn-tertiary" aria-label="Delete">
+      <button type="button" class="btn btn-icon btn-sm btn-tertiary" aria-label="Delete">
         <i class="icon element-delete"></i>
       </button>
     </div>
diff --git a/src/app/examples/buttons/buttons.html b/src/app/examples/buttons/buttons.html
index eae6c6393..a0b21fdb8 100644
--- a/src/app/examples/buttons/buttons.html
+++ b/src/app/examples/buttons/buttons.html
@@ -1,177 +1,296 @@
-<div class="p-5 bg-base-1">
-  <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
-    <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-secondary" [disabled]="disabled">Secondary</button>
-    <button type="button" class="btn btn-secondary-warning" [disabled]="disabled"> Warning </button>
-    <button type="button" class="btn btn-secondary-danger" [disabled]="disabled">Danger</button>
-    <button type="button" class="btn btn-input" [disabled]="disabled">Input</button>
-    <button type="button" class="btn btn-tertiary" [disabled]="disabled">Tertiary</button>
-    <button type="button" class="btn btn-tertiary-warning" [disabled]="disabled"> Warning </button>
-    <button type="button" class="btn btn-tertiary-danger" [disabled]="disabled">Danger</button>
-  </div>
+<div class="d-flex flex-column p-5 h-100">
+  <div class="mb-6">
+    <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
+      <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-secondary" [disabled]="disabled">Secondary</button>
+      <button type="button" class="btn btn-secondary-warning" [disabled]="disabled">
+        Warning
+      </button>
+      <button type="button" class="btn btn-secondary-danger" [disabled]="disabled">Danger</button>
+      <button type="button" class="btn btn-tertiary" [disabled]="disabled">Tertiary</button>
+      <button type="button" class="btn btn-tertiary-warning" [disabled]="disabled">
+        Warning
+      </button>
+      <button type="button" class="btn btn-tertiary-danger" [disabled]="disabled">Danger</button>
+    </div>
 
-  <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-alarm-filled"></i>Default
-    </button>
-    <button type="button" class="btn btn-warning" [disabled]="disabled">
-      <i aria-hidden="true" class="icon element-alarm-filled"></i>Warning
-    </button>
-    <button type="button" class="btn btn-danger" [disabled]="disabled">
-      <i aria-hidden="true" class="icon element-delete-filled"></i>Danger
-    </button>
-    <button type="button" class="btn btn-secondary" [disabled]="disabled">
-      <i aria-hidden="true" class="icon element-upload"></i>Secondary
-    </button>
-    <button type="button" class="btn btn-input dropdown-toggle" [disabled]="disabled">
-      <i aria-hidden="true" class="icon element-calendar"></i>24.8.2023 - 31.8.2023
-      <i aria-hidden="true" class="dropdown-caret icon element-down-2"></i>
-    </button>
-    <button type="button" class="btn btn-tertiary" [disabled]="disabled">
-      <i aria-hidden="true" class="icon element-upload"></i>Tertiary
-    </button>
-  </div>
+    <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
+      </button>
+      <button type="button" class="btn btn-warning" [disabled]="disabled">
+        <i aria-hidden="true" class="icon element-alarm-filled"></i>Warning
+      </button>
+      <button type="button" class="btn btn-danger" [disabled]="disabled">
+        <i aria-hidden="true" class="icon element-delete-filled"></i>Danger
+      </button>
+      <button type="button" class="btn btn-secondary" [disabled]="disabled">
+        <i aria-hidden="true" class="icon element-upload"></i>Secondary
+      </button>
+      <button type="button" class="btn btn-tertiary" [disabled]="disabled">
+        <i aria-hidden="true" class="icon element-upload"></i>Tertiary
+      </button>
+    </div>
 
-  <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
-    <button
-      type="button"
-      class="btn btn-circle btn-lg btn-primary element-clock"
-      aria-label="clock"
-      [disabled]="disabled"
-    ></button>
-
-    <button
-      type="button"
-      class="btn btn-circle btn-lg btn-warning element-bath"
-      aria-label="bath"
-      [disabled]="disabled"
-    ></button>
-
-    <button
-      type="button"
-      class="btn btn-circle btn-lg btn-danger element-library"
-      aria-label="library"
-      [disabled]="disabled"
-    ></button>
-
-    <button
-      type="button"
-      class="btn btn-circle btn-lg btn-secondary element-badge"
-      aria-label="badge"
-      [disabled]="disabled"
-    ></button>
-
-    <button
-      type="button"
-      class="btn btn-circle btn-lg btn-secondary-warning element-badge"
-      aria-label="badge"
-      [disabled]="disabled"
-    ></button>
-
-    <button
-      type="button"
-      class="btn btn-circle btn-lg btn-secondary-danger element-badge"
-      aria-label="badge"
-      [disabled]="disabled"
-    ></button>
-
-    <button
-      type="button"
-      class="btn btn-circle btn-lg btn-tertiary element-badge"
-      aria-label="badge"
-      [disabled]="disabled"
-    ></button>
-
-    <button
-      type="button"
-      class="btn btn-circle btn-lg btn-tertiary-warning element-badge"
-      aria-label="badge"
-      [disabled]="disabled"
-    ></button>
-
-    <button
-      type="button"
-      class="btn btn-circle btn-lg btn-tertiary-danger element-badge"
-      aria-label="badge"
-      [disabled]="disabled"
-    ></button>
-
-    <button
-      type="button"
-      class="btn btn-circle btn-lg btn-ghost element-delete"
-      aria-label="delete"
-      [disabled]="disabled"
-    ></button>
-  </div>
+    <h4 class="mb-4">Input buttons</h4>
+    <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
+      <button type="button" class="btn btn-input" [disabled]="disabled">Input</button>
+      <button type="button" class="btn btn-input dropdown-toggle" [disabled]="disabled">
+        <i aria-hidden="true" class="icon element-calendar"></i>24.8.2023 - 31.8.2023
+        <i aria-hidden="true" class="dropdown-caret icon element-down-2"></i>
+      </button>
+    </div>
 
-  <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
-    <button
-      type="button"
-      class="btn btn-circle btn-sm btn-primary element-clock"
-      aria-label="clock"
-      [disabled]="disabled"
-    ></button>
-
-    <button
-      type="button"
-      class="btn btn-circle btn-sm btn-warning element-bath"
-      aria-label="bath"
-      [disabled]="disabled"
-    ></button>
-
-    <button
-      type="button"
-      class="btn btn-circle btn-sm btn-danger element-library"
-      aria-label="library"
-      [disabled]="disabled"
-    ></button>
-
-    <button
-      type="button"
-      class="btn btn-circle btn-sm btn-secondary element-badge"
-      aria-label="badge"
-      [disabled]="disabled"
-    ></button>
-
-    <button
-      type="button"
-      class="btn btn-circle btn-sm btn-tertiary element-badge"
-      aria-label="badge"
-      [disabled]="disabled"
-    ></button>
-
-    <button
-      type="button"
-      class="btn btn-circle btn-sm btn-ghost element-delete"
-      aria-label="delete"
-      [disabled]="disabled"
-    ></button>
-  </div>
+    <h4 class="mb-4">Icon buttons</h4>
+    <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
+      <button
+        type="button"
+        class="btn btn-icon btn-lg btn-primary element-clock"
+        aria-label="clock"
+        [disabled]="disabled"
+      ></button>
 
-  <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
-    <button type="button" class="btn btn-secondary btn-sm" [disabled]="disabled">btn-sm</button>
-    <button type="button" class="btn btn-secondary" [disabled]="disabled">default</button>
-    <button type="button" class="btn btn-secondary btn-lg" [disabled]="disabled">btn-lg</button>
-  </div>
+      <button
+        type="button"
+        class="btn btn-icon btn-lg btn-warning element-bath"
+        aria-label="bath"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-icon btn-lg btn-danger element-library"
+        aria-label="library"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-icon btn-lg btn-secondary element-badge"
+        aria-label="secondary badge"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-icon btn-lg btn-secondary-warning element-badge"
+        aria-label="secondary warning badge"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-icon btn-lg btn-secondary-danger element-badge"
+        aria-label="secondary danger badge"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-icon btn-lg btn-tertiary element-badge"
+        aria-label="tertiary badge"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-icon btn-lg btn-tertiary-warning element-badge"
+        aria-label="tertiary warning badge"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-icon btn-lg btn-tertiary-danger element-badge"
+        aria-label="tertiary danger badge"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-icon btn-lg btn-ghost element-delete"
+        aria-label="delete"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-close btn-tertiary"
+        aria-label="close"
+        [disabled]="disabled"
+      ></button>
+
+      <button type="button" class="btn btn-close" aria-label="close" [disabled]="disabled"></button>
+    </div>
+
+    <h4 class="mb-4">Circle buttons</h4>
+    <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
+      <button
+        type="button"
+        class="btn btn-circle btn-lg btn-primary element-clock"
+        aria-label="clock"
+        [disabled]="disabled"
+      ></button>
 
-  <div class="d-flex flex-wrap align-items-center gap-4">
-    <a class="btn btn-primary" href="#">Go back</a>
-    <a class="btn btn-warning" href="#">Go back</a>
-    <a class="btn btn-danger" href="#">Go back</a>
-    <a class="btn btn-secondary" href="#">Go back</a>
-    <a class="btn btn-tertiary" href="#">Go back</a>
+      <button
+        type="button"
+        class="btn btn-circle btn-lg btn-warning element-bath"
+        aria-label="bath"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-circle btn-lg btn-danger element-library"
+        aria-label="library"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-circle btn-lg btn-secondary element-badge"
+        aria-label="secondary badge"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-circle btn-lg btn-secondary-warning element-badge"
+        aria-label="secondary warning badge"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-circle btn-lg btn-secondary-danger element-badge"
+        aria-label="secondary danger badge"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-circle btn-lg btn-tertiary element-badge"
+        aria-label="tertiary badge"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-circle btn-lg btn-tertiary-warning element-badge"
+        aria-label="tertiary warning badge"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-circle btn-lg btn-tertiary-danger element-badge"
+        aria-label="tertiary danger badge"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-circle btn-lg btn-ghost element-delete"
+        aria-label="delete"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-circle btn-close btn-tertiary"
+        aria-label="close"
+        [disabled]="disabled"
+      ></button>
+
+      <button
+        type="button"
+        class="btn btn-circle btn-close"
+        aria-label="close"
+        [disabled]="disabled"
+      ></button>
+    </div>
+
+    <h4 class="mb-4">Button sizing</h4>
+    <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
+      <button type="button" class="btn btn-secondary btn-lg" [disabled]="disabled">Large</button>
+      <button type="button" class="btn btn-secondary" [disabled]="disabled">Default</button>
+      <button type="button" class="btn btn-secondary btn-sm" [disabled]="disabled">Small</button>
+    </div>
+
+    <h4 class="mb-4">Icon button sizing</h4>
+    <div class="d-flex flex-wrap align-items-center gap-4 mb-6">
+      <button
+        type="button"
+        class="btn btn-icon btn-secondary element-clock"
+        aria-label="default icon button"
+        [disabled]="disabled"
+      ></button>
+      <button
+        type="button"
+        class="btn btn-icon btn-circle btn-secondary element-clock"
+        aria-label="default circle button"
+        [disabled]="disabled"
+      ></button>
+      <button
+        type="button"
+        class="btn btn-icon btn-sm btn-secondary element-clock"
+        aria-label="small icon button"
+        [disabled]="disabled"
+      ></button>
+      <button
+        type="button"
+        class="btn btn-icon btn-circle btn-sm btn-secondary element-clock"
+        aria-label="small circle button"
+        [disabled]="disabled"
+      ></button>
+      <button
+        type="button"
+        class="btn btn-icon btn-xs btn-secondary element-clock"
+        aria-label="extra small icon button"
+        [disabled]="disabled"
+      ></button>
+      <button
+        type="button"
+        class="btn btn-icon btn-circle btn-xs btn-secondary element-clock"
+        aria-label="extra small circle button"
+        [disabled]="disabled"
+      ></button>
+    </div>
+
+    <h4 class="mb-4">Button links</h4>
+    <div class="d-flex flex-wrap align-items-center gap-4">
+      <a class="btn btn-primary" href="#">
+        <i aria-hidden="true" class="icon element-link"></i>Primary Link
+      </a>
+      <a class="btn btn-warning" href="#">
+        <i aria-hidden="true" class="icon element-link"></i>Warning Link
+      </a>
+      <a class="btn btn-danger" href="#">
+        <i aria-hidden="true" class="icon element-link"></i>Danger Link
+      </a>
+      <a class="btn btn-secondary" href="#">
+        <i aria-hidden="true" class="icon element-link"></i>Secondary Link
+      </a>
+      <a class="btn btn-tertiary" href="#">
+        <i aria-hidden="true" class="icon element-link"></i>Tertiary Link
+      </a>
+    </div>
   </div>
-</div>
 
-<div class="form-check m-4 e2e-ignore">
-  <input
-    type="checkbox"
-    class="form-check-input"
-    id="disable-button"
-    [value]="disabled"
-    (change)="disabled = !disabled"
-  />
-  <label class="form-check-label" for="disable-button">Disable all buttons</label>
+  <div class="d-inline-block bg-base-1 p-5 mt-auto rounded-3 e2e-ignore">
+    <div class="form-check form-switch">
+      <input
+        type="checkbox"
+        class="form-check-input"
+        role="switch"
+        id="backdrop-switch"
+        [checked]="disabled"
+        (change)="disabled = !disabled"
+      />
+      <label for="backdrop-switch" class="form-check-label">Disable all buttons</label>
+    </div>
+  </div>
 </div>
diff --git a/src/app/examples/buttons/selection-buttons.html b/src/app/examples/buttons/selection-buttons.html
index 1d242cac5..d564c150d 100644
--- a/src/app/examples/buttons/selection-buttons.html
+++ b/src/app/examples/buttons/selection-buttons.html
@@ -34,17 +34,17 @@ <h4>Single-select</h4>
 
 <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">
+  <label class="btn btn-sm btn-icon" for="btnradio3-1" aria-label="One pane">
     <i class="icon element-layout-pane-1" aria-hidden="true"></i>
   </label>
 
   <input type="radio" class="btn-check" name="btnradio3" id="btnradio3-2" />
-  <label class="btn btn-icon" for="btnradio3-2" aria-label="Two panes">
+  <label class="btn btn-sm btn-icon" for="btnradio3-2" aria-label="Two panes">
     <i class="icon element-layout-pane-2" aria-hidden="true"></i>
   </label>
 
   <input type="radio" class="btn-check" name="btnradio3" id="btnradio3-3" />
-  <label class="btn btn-icon" for="btnradio3-3" aria-label="Three panes">
+  <label class="btn btn-sm btn-icon" for="btnradio3-3" aria-label="Three panes">
     <i class="icon element-layout-pane-3" aria-hidden="true"></i>
   </label>
 </div>
diff --git a/src/app/examples/buttons/split-button.html b/src/app/examples/buttons/split-button.html
index 6271507db..35ac27865 100644
--- a/src/app/examples/buttons/split-button.html
+++ b/src/app/examples/buttons/split-button.html
@@ -7,7 +7,7 @@
       </button>
       <button
         type="button"
-        class="btn btn-primary btn-icon dropdown-toggle"
+        class="btn btn-primary btn-icon btn-sm dropdown-toggle"
         aria-label="Dropdown toggle"
         [cdkMenuTriggerFor]="dropdownMenu"
         [class.show]="splitOpen1"
@@ -25,7 +25,7 @@
       </button>
       <button
         type="button"
-        class="btn btn-secondary btn-icon dropdown-toggle"
+        class="btn btn-secondary btn-icon btn-sm dropdown-toggle"
         aria-label="Dropdown toggle"
         [cdkMenuTriggerFor]="dropdownMenu"
         [class.show]="splitOpen2"
@@ -42,7 +42,7 @@
       <button type="button" class="btn btn-primary"> Button </button>
       <button
         type="button"
-        class="btn btn-primary btn-icon dropdown-toggle"
+        class="btn btn-primary btn-icon btn-sm dropdown-toggle"
         aria-label="Dropdown toggle"
         [cdkMenuTriggerFor]="dropdownMenu"
         [class.show]="splitOpen4"
@@ -57,7 +57,7 @@
       <button type="button" class="btn btn-secondary"> Button </button>
       <button
         type="button"
-        class="btn btn-secondary btn-icon dropdown-toggle"
+        class="btn btn-secondary btn-icon btn-sm dropdown-toggle"
         aria-label="Dropdown toggle"
         [cdkMenuTriggerFor]="dropdownMenu"
         [class.show]="splitOpen5"
@@ -71,12 +71,12 @@
 
   <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">
+      <button type="button" class="btn btn-primary btn-icon btn-sm" aria-label="Button">
         <i class="icon element-download"></i>
       </button>
       <button
         type="button"
-        class="btn btn-primary btn-icon dropdown-toggle"
+        class="btn btn-primary btn-icon btn-sm dropdown-toggle"
         aria-label="Dropdown toggle"
         [cdkMenuTriggerFor]="dropdownMenu"
         [class.show]="splitOpen7"
@@ -88,12 +88,12 @@
     </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">
+      <button type="button" class="btn btn-secondary btn-icon btn-sm" aria-label="Button">
         <i class="icon element-download"></i>
       </button>
       <button
         type="button"
-        class="btn btn-secondary btn-icon dropdown-toggle"
+        class="btn btn-secondary btn-icon btn-sm dropdown-toggle"
         aria-label="Dropdown toggle"
         [cdkMenuTriggerFor]="dropdownMenu"
         [class.show]="splitOpen8"