diff --git a/js/tests/unit/quantity-selector.spec.js b/js/tests/unit/quantity-selector.spec.js
index 08c47b9d27..6933be5a32 100644
--- a/js/tests/unit/quantity-selector.spec.js
+++ b/js/tests/unit/quantity-selector.spec.js
@@ -83,10 +83,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -104,10 +104,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -125,10 +125,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="9" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -152,10 +152,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -179,10 +179,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1.25" min="0" max="10" step="0.5" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -202,10 +202,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="1.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -227,10 +227,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="8.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -252,10 +252,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
@@ -280,10 +280,10 @@ describe('QuantitySelector', () => {
     fixtureEl.innerHTML = [
       '<div class="input-group quantity-selector">',
       '  <input type="number" id="inputQuantitySelector1" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="9.5" min="0" max="10" step="1" data-bs-round="1" aria-label="Quantity selector">',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="down">',
       '    <span class="visually-hidden">Step down</span>',
       '  </button>',
-      '  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
+      '  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector1" data-bs-step="up">',
       '    <span class="visually-hidden">Step up</span>',
       '  </button>',
       '</div>'
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index 7dcb33d54c..d782f47903 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -68,8 +68,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </div>
           </div>
           <div class="btn-group dropup">
-            <button type="button" class="btn btn-secondary">Dropup split</button>
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+            <button type="button" class="btn btn-outline-secondary">Dropup split</button>
+            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Dropup split</span>
             </button>
             <ul class="dropdown-menu">
@@ -104,8 +104,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
         <div class="col-sm-12 mt-4">
           <div class="btn-group dropup">
-            <a href="#" class="btn btn-secondary">Dropup split align end</a>
-            <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-outline-secondary">Dropup split align end</a>
+            <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu dropdown-menu-end">
@@ -126,8 +126,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
 
         <div class="col-sm-12 mt-4">
           <div class="btn-group dropend">
-            <a href="#" class="btn btn-secondary">Dropend split</a>
-            <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-outline-secondary">Dropend split</a>
+            <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu">
@@ -148,8 +148,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           </div>
           <!-- dropstart -->
           <div class="btn-group dropstart">
-            <a href="#" class="btn btn-secondary">Dropstart split</a>
-            <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+            <a href="#" class="btn btn-outline-secondary">Dropstart split</a>
+            <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
               <span class="visually-hidden">Product actions</span>
             </button>
             <div class="dropdown-menu">
@@ -174,8 +174,8 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
       <div class="row">
         <div class="col-sm-3 mt-4">
           <div class="btn-group dropdown">
-            <button type="button" class="btn btn-secondary">Dropdown reference</button>
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
+            <button type="button" class="btn btn-outline-secondary">Dropdown reference</button>
+            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
               <span class="visually-hidden">Dropdown split</span>
             </button>
             <ul class="dropdown-menu">
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index b72f809256..7b14c1b79a 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -112,7 +112,7 @@ <h4>Overflowing text to show scroll behavior</h4>
               <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
               <button type="button" class="btn btn-primary">Save changes</button>
             </div>
           </div>
@@ -136,7 +136,7 @@ <h1 class="modal-title h4" id="firefoxModalLabel">Firefox Bug Test</h1>
               <p>Test result: <strong id="ff-bug-test-result"></strong></p>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
               <button type="button" class="btn btn-primary">Save changes</button>
             </div>
           </div>
@@ -154,7 +154,7 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>
               <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
               <button type="button" class="btn btn-primary">Save changes</button>
             </div>
           </div>
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index c41bd3a840..70aff36f5b 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -97,28 +97,50 @@
 //
 
 // scss-docs-start btn-variant-loops
-.btn-primary,
+.btn-primary {
+  @include button-variant($primary, $primary, $black, $active-background: var(--#{$prefix}highlight-color), $active-border: var(--#{$prefix}highlight-bg), $active-color: var(--#{$prefix}highlight-bg));
+}
+
+.btn-success {
+  @include button-variant($green, $green, $white);
+}
+
+.btn-danger {
+  @include button-variant($red, $red, $white);
+}
+
 .btn-warning {
-  @include button-variant($primary, $primary, $black, $active-background: transparent, $active-border: var(--#{$prefix}highlight-bg), $active-color: var(--#{$prefix}highlight-bg));
+  @include button-variant($yellow, $yellow, $black);
 }
 
-.btn-light,
-.btn-secondary,
-.btn-outline-secondary {
-  @include button-variant(transparent, var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-bg), $disabled-background: transparent, $disabled-color: var(--#{$prefix}disabled-color));
+.btn-info {
+  @include button-variant($blue, $blue, $white);
 }
 
-.btn-success {
-  @include button-variant($green, $green, $white);
+.btn-light {
+  @include button-variant($light, $light, $black);
 }
 
-.btn-info,
 .btn-dark {
-  @include button-variant(var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-color), $hover-background: transparent, $hover-border: var(--#{$prefix}highlight-bg), $hover-color: var(--#{$prefix}highlight-bg));
+  @include button-variant($dark, $dark, $white, $hover-background: $white, $hover-border: var(--#{$prefix}highlight-bg), $hover-color: $black);
 }
 
-.btn-danger {
-  @include button-variant($red, $red, $white);
+.btn-secondary {
+  @include button-variant(var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-color), $hover-background: var(--#{$prefix}highlight-color), $hover-border: var(--#{$prefix}highlight-bg), $hover-color: var(--#{$prefix}highlight-bg));
+}
+
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    $btn-outline-hover-color: $white;
+    @if index(("primary", "warning", "info", "light"), #{$color}) {
+      $btn-outline-hover-color: $black;
+    }
+    @if #{$color} == "secondary" {
+      @include button-outline-variant(var(--#{$prefix}highlight-bg), var(--#{$prefix}highlight-color));
+    } @else {
+      @include button-outline-variant($value, $btn-outline-hover-color);
+    }
+  }
 }
 // scss-docs-end btn-variant-loops
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 353f2b5308..973ce7d7fc 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -993,6 +993,16 @@ $btn-default-disabled-bg:     var(--#{$prefix}disabled-color) !default; // Boost
 $btn-default-disabled-border: var(--#{$prefix}disabled-color) !default; // Boosted mod
 $btn-default-disabled-color:  var(--#{$prefix}highlight-color) !default; // Boosted mod
 
+$btn-outline-default-hover-bg:        var(--#{$prefix}btn-color) !default; // Boosted mod
+$btn-outline-default-hover-border:    var(--#{$prefix}btn-border-color) !default; // Boosted mod
+$btn-outline-default-hover-color:     $white !default; // Boosted mod
+$btn-outline-default-active-bg:       $primary !default; // Boosted mod
+$btn-outline-default-active-border:   $primary !default; // Boosted mod
+$btn-outline-default-active-color:    $black !default; // Boosted mod
+$btn-outline-default-disabled-bg:     transparent !default; // Boosted mod
+$btn-outline-default-disabled-border: var(--#{$prefix}disabled-color) !default; // Boosted mod
+$btn-outline-default-disabled-color:  var(--#{$prefix}disabled-color) !default; // Boosted mod
+
 $btn-font-weight:             $font-weight-bold !default;
 $btn-box-shadow:              null !default;
 $btn-focus-width:             $input-btn-focus-width !default;
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index a55d676e21..54ec815cda 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -36,7 +36,32 @@
 }
 // scss-docs-end btn-variant-mixin
 
-// Boosted mod: no `@mixin button-outline-variant`
+// scss-docs-start btn-outline-variant-mixin
+@mixin button-outline-variant(
+  $color,
+  $color-hover: $btn-outline-default-hover-color, // Boosted mod: instead of `color-contrast($color)`
+  $active-background: $btn-outline-default-active-bg, // Boosted mod: instead of `$color`
+  $active-border: $btn-outline-default-active-border, // Boosted mod: instead of `$color`
+  $active-color: $btn-outline-default-active-color, // Booted mod: `color-contrast($active-background)`
+  $hover-background: $btn-outline-default-hover-bg, // Boosted mod
+  $hover-border: $btn-outline-default-hover-border // Boosted mod
+) {
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-border-color: #{$color};
+  --#{$prefix}btn-hover-color: #{$color-hover};
+  --#{$prefix}btn-hover-bg: #{$hover-background}; // Boosted mod: instead of using `#{$active-background}`
+  --#{$prefix}btn-hover-border-color: #{$hover-border}; // Boosted mod: instead of using `#{$active-border}`
+  --#{$prefix}btn-focus-shadow-rgb: #{$color};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$btn-outline-default-disabled-color};
+  --#{$prefix}btn-disabled-bg: #{$btn-outline-default-disabled-bg};
+  --#{$prefix}btn-disabled-border-color: #{$btn-outline-default-disabled-border};
+  --#{$prefix}gradient: none;
+}
+// scss-docs-end btn-outline-variant-mixin
 
 // scss-docs-start btn-size-mixin
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius, $line-height: null, $icon-spacing: $btn-icon-padding-x, $letter-spacing: $letter-spacing-base) {
diff --git a/site/assets/js/tac.js b/site/assets/js/tac.js
index 63a44690ae..930fb579a5 100644
--- a/site/assets/js/tac.js
+++ b/site/assets/js/tac.js
@@ -29,7 +29,9 @@
   window.addEventListener('tac.open_alert', () => {
     const alert = document.getElementById('tarteaucitronAlertBig')
 
-    document.getElementById('tarteaucitronCloseAlert').classList.add('btn', 'btn-sm', 'btn-info', 'ms-lg-2')
+    alert.setAttribute('data-bs-theme', 'dark');
+
+    document.getElementById('tarteaucitronCloseAlert').classList.add('btn', 'btn-sm', 'btn-secondary', 'ms-lg-2')
     alert.querySelector('.tarteaucitronAllow').classList.add('btn', 'btn-sm', 'btn-success', 'mx-sm-2', 'ms-lg-auto', 'my-2', 'my-lg-0')
     alert.querySelector('.tarteaucitronAllow').innerHTML = tarteaucitron.lang.acceptAll
     alert.querySelector('.tarteaucitronDeny').classList.add('btn', 'btn-sm', 'btn-danger', 'mx-sm-2', 'my-2', 'my-lg-0')
diff --git a/site/assets/scss/_tarteaucitron.scss b/site/assets/scss/_tarteaucitron.scss
index 0266384b8a..31ad52f109 100644
--- a/site/assets/scss/_tarteaucitron.scss
+++ b/site/assets/scss/_tarteaucitron.scss
@@ -71,10 +71,6 @@
   font-size: $font-size-sm;
 }
 
-@include tac("CloseAlert") {
-  @include button-variant(transparent, transparent, var(--#{$prefix}body-color), $disabled-background: transparent, $disabled-color: var(--#{$prefix}disabled-color));
-}
-
 @include tac("ClosePanel") {
   position: absolute;
   right: $modal-content-padding;
diff --git a/site/content/docs/5.3/components/back-to-top.md b/site/content/docs/5.3/components/back-to-top.md
index 6564cf69da..66bda336d5 100644
--- a/site/content/docs/5.3/components/back-to-top.md
+++ b/site/content/docs/5.3/components/back-to-top.md
@@ -31,14 +31,14 @@ Smooth scrolling does not depend on this component. It's turned on only when the
 
 <div class="bd-example">
   <nav aria-label="Standard back to top example" class="back-to-top position-static ps-5 ms-5">
-    <a href="#top" class="back-to-top-link btn btn-icon btn-secondary position-relative top-0" data-bs-label="Back to top">
+    <a href="#top" class="back-to-top-link btn btn-icon btn-outline-secondary position-relative top-0" data-bs-label="Back to top">
       <span class="visually-hidden">Back to top</span>
     </a>
   </nav>
 </div>
 {{< example show_preview="false" >}}
 <nav aria-label="Back to top" class="back-to-top">
-  <a href="#top" class="back-to-top-link btn btn-icon btn-secondary" data-bs-label="Back to top">
+  <a href="#top" class="back-to-top-link btn btn-icon btn-outline-secondary" data-bs-label="Back to top">
     <span class="visually-hidden">Back to top</span>
   </a>
 </nav>
@@ -57,7 +57,7 @@ Add `.position-fixed` utility to your `.back-to-top-link` to make your back-to-t
 
 {{< example show_preview="false" >}}
 <nav aria-label="Fixed back to top example" class="back-to-top">
-  <a href="#top" class="back-to-top-link position-fixed btn btn-icon btn-secondary" data-bs-label="Back to top">
+  <a href="#top" class="back-to-top-link position-fixed btn btn-icon btn-outline-secondary" data-bs-label="Back to top">
     <span class="visually-hidden">Back to top</span>
   </a>
 </nav>
@@ -69,14 +69,14 @@ Use a `title` attribute instead of `data-bs-label` to ensure a visible label is
 
 <div class="bd-example">
   <nav aria-label="Icon only back to top example" class="back-to-top position-static">
-    <a href="#top" class="back-to-top-link position-static btn btn-icon btn-secondary" title="Back to top">
+    <a href="#top" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
       <span class="visually-hidden">Back to top</span>
     </a>
   </nav>
 </div>
 {{< example show_preview="false" >}}
 <nav aria-label="Back to top" class="back-to-top">
-  <a href="#top" class="back-to-top-link btn btn-icon btn-secondary" title="Back to top">
+  <a href="#top" class="back-to-top-link btn btn-icon btn-outline-secondary" title="Back to top">
     <span class="visually-hidden">Back to top</span>
   </a>
 </nav>
diff --git a/site/content/docs/5.3/components/button-group.md b/site/content/docs/5.3/components/button-group.md
index 41c7f0683d..02b3c124c8 100644
--- a/site/content/docs/5.3/components/button-group.md
+++ b/site/content/docs/5.3/components/button-group.md
@@ -14,9 +14,9 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
 
 {{< example >}}
 <div class="btn-group" role="group" aria-label="Basic example">
-  <button type="button" class="btn btn-secondary">Left</button>
-  <button type="button" class="btn btn-secondary">Middle</button>
-  <button type="button" class="btn btn-secondary">Right</button>
+  <button type="button" class="btn btn-outline-secondary">Left</button>
+  <button type="button" class="btn btn-outline-secondary">Middle</button>
+  <button type="button" class="btn btn-outline-secondary">Right</button>
 </div>
 {{< /example >}}
 
@@ -28,9 +28,9 @@ These classes can also be added to groups of links, as an alternative to the [`.
 
 {{< example >}}
 <div class="btn-group" role="group">
-  <a href="#" class="btn btn-secondary active" aria-current="page">Active link</a>
-  <a href="#" class="btn btn-secondary">Link</a>
-  <a href="#" class="btn btn-secondary">Link</a>
+  <a href="#" class="btn btn-outline-secondary active" aria-current="page">Active link</a>
+  <a href="#" class="btn btn-outline-secondary">Link</a>
+  <a href="#" class="btn btn-outline-secondary">Link</a>
 </div>
 {{< /example >}}
 
@@ -105,12 +105,12 @@ This variant should not be used because it does not respect the Orange Design Sy
     <button type="button" class="btn btn-primary">4</button>
   </div>
   <div class="btn-group me-2" role="group" aria-label="Second group">
-    <button type="button" class="btn btn-secondary">5</button>
-    <button type="button" class="btn btn-secondary">6</button>
-    <button type="button" class="btn btn-secondary">7</button>
+    <button type="button" class="btn btn-outline-secondary">5</button>
+    <button type="button" class="btn btn-outline-secondary">6</button>
+    <button type="button" class="btn btn-outline-secondary">7</button>
   </div>
   <div class="btn-group" role="group" aria-label="Third group">
-    <button type="button" class="btn btn-info">8</button>
+    <button type="button" class="btn btn-secondary">8</button>
   </div>
 </div>
 {{< /example >}}
@@ -120,10 +120,10 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
 {{< example >}}
 <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
   <div class="btn-group me-2" role="group" aria-label="First group">
-    <button type="button" class="btn btn-secondary">1</button>
-    <button type="button" class="btn btn-secondary">2</button>
-    <button type="button" class="btn btn-secondary">3</button>
-    <button type="button" class="btn btn-secondary">4</button>
+    <button type="button" class="btn btn-outline-secondary">1</button>
+    <button type="button" class="btn btn-outline-secondary">2</button>
+    <button type="button" class="btn btn-outline-secondary">3</button>
+    <button type="button" class="btn btn-outline-secondary">4</button>
   </div>
   <div class="input-group">
     <div class="input-group-text" id="btnGroupAddon">@</div>
@@ -133,10 +133,10 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
 
 <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
   <div class="btn-group" role="group" aria-label="First group">
-    <button type="button" class="btn btn-secondary">1</button>
-    <button type="button" class="btn btn-secondary">2</button>
-    <button type="button" class="btn btn-secondary">3</button>
-    <button type="button" class="btn btn-secondary">4</button>
+    <button type="button" class="btn btn-outline-secondary">1</button>
+    <button type="button" class="btn btn-outline-secondary">2</button>
+    <button type="button" class="btn btn-outline-secondary">3</button>
+    <button type="button" class="btn btn-outline-secondary">4</button>
   </div>
   <div class="input-group">
     <div class="input-group-text" id="btnGroupAddon2">@</div>
@@ -151,21 +151,21 @@ Instead of applying button sizing classes to every button in a group, just add `
 
 {{< example >}}
 <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
-  <button type="button" class="btn btn-secondary">Left</button>
-  <button type="button" class="btn btn-secondary">Middle</button>
-  <button type="button" class="btn btn-secondary">Right</button>
+  <button type="button" class="btn btn-outline-secondary">Left</button>
+  <button type="button" class="btn btn-outline-secondary">Middle</button>
+  <button type="button" class="btn btn-outline-secondary">Right</button>
 </div>
 <br>
 <div class="btn-group" role="group" aria-label="Default button group">
-  <button type="button" class="btn btn-secondary">Left</button>
-  <button type="button" class="btn btn-secondary">Middle</button>
-  <button type="button" class="btn btn-secondary">Right</button>
+  <button type="button" class="btn btn-outline-secondary">Left</button>
+  <button type="button" class="btn btn-outline-secondary">Middle</button>
+  <button type="button" class="btn btn-outline-secondary">Right</button>
 </div>
 <br>
 <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
-  <button type="button" class="btn btn-secondary">Left</button>
-  <button type="button" class="btn btn-secondary">Middle</button>
-  <button type="button" class="btn btn-secondary">Right</button>
+  <button type="button" class="btn btn-outline-secondary">Left</button>
+  <button type="button" class="btn btn-outline-secondary">Middle</button>
+  <button type="button" class="btn btn-outline-secondary">Right</button>
 </div>
 {{< /example >}}
 
@@ -179,12 +179,12 @@ This variant should not be used because it does not respect the Orange Design Sy
 
 {{< example >}}
 <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
-  <button type="button" class="btn btn-secondary">1</button>
-  <button type="button" class="btn btn-secondary">2</button>
+  <button type="button" class="btn btn-outline-secondary">1</button>
+  <button type="button" class="btn btn-outline-secondary">2</button>
 
   <div class="btn-group" role="group">
-    <button type="button" class="btn btn-secondary">Split button</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary">Split button</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -214,11 +214,11 @@ These 2 vertical variants should not be used because they do not respect the Ora
 
 {{< example >}}
 <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
-  <button type="button" class="btn btn-secondary">Button</button>
-  <button type="button" class="btn btn-secondary">Button</button>
+  <button type="button" class="btn btn-outline-secondary">Button</button>
+  <button type="button" class="btn btn-outline-secondary">Button</button>
   <div class="btn-group" role="group">
-    <button type="button" class="btn btn-secondary">Split button</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary">Split button</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -227,8 +227,8 @@ These 2 vertical variants should not be used because they do not respect the Ora
     </ul>
   </div>
   <div class="btn-group dropstart" role="group">
-    <button type="button" class="btn btn-secondary">Split button</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary">Split button</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -237,8 +237,8 @@ These 2 vertical variants should not be used because they do not respect the Ora
     </ul>
   </div>
   <div class="btn-group dropend" role="group">
-    <button type="button" class="btn btn-secondary">Split button</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary">Split button</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -247,8 +247,8 @@ These 2 vertical variants should not be used because they do not respect the Ora
     </ul>
   </div>
   <div class="btn-group dropup" role="group">
-    <button type="button" class="btn btn-secondary">Split button</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary">Split button</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md
index ad3e31f6b1..c447f11a10 100644
--- a/site/content/docs/5.3/components/buttons.md
+++ b/site/content/docs/5.3/components/buttons.md
@@ -24,6 +24,24 @@ The `.btn` class is intended to be used in conjunction with our button variants,
 
 Boosted includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control.
 
+{{< example >}}
+<button type="button" class="btn btn-primary">Primary</button>
+<button type="button" class="btn btn-secondary">Secondary</button>
+<button type="button" class="btn btn-success">Success</button>
+<button type="button" class="btn btn-danger">Danger</button>
+
+<button type="button" class="btn btn-link">Link</button>
+{{< /example >}}
+
+<details>
+<summary>Other variants from Bootstrap</summary>
+<br>
+{{< design-callout-alert >}}
+Warning, info, light and dark variants should not be used because they do not respect the Orange Design System specifications as they are inherited from Bootstrap.
+
+Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
+{{< /design-callout-alert >}}
+
 {{< example >}}
 {{< buttons.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
@@ -37,6 +55,7 @@ Boosted includes several button variants, each serving its own semantic purpose,
 {{< callout info >}}
 {{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
+</details>
 
 <!-- Boosted mod -->
 ## With icon
@@ -74,19 +93,19 @@ The recommended way of using an icon in a button is [an embedded SVG]({{< docsre
 Add `.btn-icon` to get a squared button, meant to only contain an icon. Make sure to provide an accessible name to your button, either using a `.visually-hidden` content or a `aria-label` attribute.
 
 {{< example >}}
-<button type="button" class="btn btn-icon btn-secondary btn-sm">
+<button type="button" class="btn btn-icon btn-outline-secondary btn-sm">
   <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
   </svg>
   <span class="visually-hidden">Secondary</span>
 </button>
-<button type="button" class="btn btn-icon btn-secondary">
+<button type="button" class="btn btn-icon btn-outline-secondary">
   <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
   </svg>
   <span class="visually-hidden">Secondary</span>
 </button>
-<button type="button" class="btn btn-icon btn-secondary btn-lg">
+<button type="button" class="btn btn-icon btn-outline-secondary btn-lg">
   <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
   </svg>
@@ -171,15 +190,34 @@ When using button classes on `<a>` elements that are used to trigger in-page fun
 
 ## Outline buttons
 
-In need of a button with a transparent default background color? Replace the default modifier classes with the `.btn-outline-secondary` one to remove all background colors on buttons.
+In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
 
-{{< example class="bg-supporting-blue" >}}
+{{< example >}}
 <button type="button" class="btn btn-outline-secondary">Secondary</button>
 {{< /example >}}
 
+<details>
+<summary>Other variants from Bootstrap</summary>
+<br>
+
+{{< design-callout-alert >}}
+The only variant of outline buttons that should be used is the `.btn-outline-secondary` one. The other variants should not be used because they do not respect the Orange Design System specifications as they are inherited from Bootstrap.
+
+Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
+{{< /design-callout-alert >}}
+
+{{< example >}}
+{{< buttons.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<button type="button" class="btn btn-outline-{{ .name }}">{{ .name | title }}</button>
+{{- end -}}
+{{< /buttons.inline >}}
+{{< /example >}}
+
 {{< callout info >}}
-This button should only be used on a light background in order to have sufficient contrast, otherwise use its dark variant.
+Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
 {{< /callout >}}
+</details>
 
 ## Sizes
 
@@ -218,6 +256,7 @@ Make buttons look inactive by adding the `disabled` boolean attribute to any `<b
 {{< example >}}
 <button type="button" class="btn btn-primary" disabled>Primary button</button>
 <button type="button" class="btn btn-secondary" disabled>Button</button>
+<button type="button" class="btn btn-outline-secondary" disabled>Button</button>
 {{< /example >}}
 
 Disabled buttons using the `<a>` element behave a bit different:
@@ -362,11 +401,11 @@ Each `.btn-*` modifier class updates the appropriate CSS variables to minimize a
 
 ### Sass mixins
 
-There are three mixins for buttons: button mixins (based on `$theme-colors`), a button size mixin and a button icon mixin.
+There are four mixins for buttons: button and button outline variant mixins (both based on `$theme-colors`), plus a button size mixin, and a button icon mixin.
 
 {{< scss-docs name="btn-variant-mixin" file="scss/mixins/_buttons.scss" >}}
 
-<!-- Boosted mod: no .btn-outline -->
+{{< scss-docs name="btn-outline-variant-mixin" file="scss/mixins/_buttons.scss" >}}
 
 {{< scss-docs name="btn-size-mixin" file="scss/mixins/_buttons.scss" >}}
 
diff --git a/site/content/docs/5.3/components/close-button.md b/site/content/docs/5.3/components/close-button.md
index b322859725..da014c8624 100644
--- a/site/content/docs/5.3/components/close-button.md
+++ b/site/content/docs/5.3/components/close-button.md
@@ -58,12 +58,12 @@ If you choose this option, please be aware that if the design of close buttons c
   <span class="visually-hidden">Close</span>
 </button>
 
-<button type="button" class="btn btn-icon btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+<button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
   <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
   <span class="visually-hidden">Close</span>
 </button>
 
-<button type="button" class="btn btn-icon btn-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
+<button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
   <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
   <span class="visually-hidden">Close</span>
 </button>
diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md
index ae802ad6c6..79c5615058 100644
--- a/site/content/docs/5.3/components/dropdowns.md
+++ b/site/content/docs/5.3/components/dropdowns.md
@@ -71,8 +71,8 @@ We use this extra class to reduce the horizontal `padding` on either side of the
 
 {{< example >}}
 <div class="btn-group">
-  <button type="button" class="btn btn-secondary">Action</button>
-  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-outline-secondary">Action</button>
+  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
@@ -103,8 +103,8 @@ Button dropdowns work with buttons of all sizes, including default and split dro
     </ul>
   </div>
   <div class="btn-group">
-    <button type="button" class="btn btn-lg btn-secondary">Large split button</button>
-    <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-lg btn-outline-secondary">Large split button</button>
+    <button type="button" class="btn btn-lg btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -128,10 +128,10 @@ Button dropdowns work with buttons of all sizes, including default and split dro
   </ul>
 </div>
 <div class="btn-group">
-  <button class="btn btn-secondary btn-lg" type="button">
+  <button class="btn btn-outline-secondary btn-lg" type="button">
     Large split button
   </button>
-  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-lg btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
@@ -160,8 +160,8 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
     </ul>
   </div>
   <div class="btn-group">
-    <button type="button" class="btn btn-sm btn-secondary">Small split button</button>
-    <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-sm btn-outline-secondary">Small split button</button>
+    <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -184,10 +184,10 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
   </ul>
 </div>
 <div class="btn-group">
-  <button class="btn btn-secondary btn-sm" type="button">
+  <button class="btn btn-outline-secondary btn-sm" type="button">
     Small split button
   </button>
-  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
@@ -251,10 +251,10 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
     </ul>
   </div>
   <div class="btn-group dropup">
-    <button type="button" class="btn btn-secondary">
+    <button type="button" class="btn btn-outline-secondary">
       Split dropup
     </button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -280,10 +280,10 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
 
 <!-- Split dropup button -->
 <div class="btn-group dropup">
-  <button type="button" class="btn btn-secondary">
+  <button type="button" class="btn btn-outline-secondary">
     Split dropup
   </button>
-  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
@@ -333,10 +333,10 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the
     </ul>
   </div>
   <div class="btn-group dropend">
-    <button type="button" class="btn btn-secondary">
+    <button type="button" class="btn btn-outline-secondary">
       Split dropend
     </button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropend</span>
     </button>
     <ul class="dropdown-menu">
@@ -362,10 +362,10 @@ Trigger dropdown menus at the right of the elements by adding `.dropend` to the
 
 <!-- Split dropend button -->
 <div class="btn-group dropend">
-  <button type="button" class="btn btn-secondary">
+  <button type="button" class="btn btn-outline-secondary">
     Split dropend
   </button>
-  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropend</span>
   </button>
   <ul class="dropdown-menu">
@@ -392,7 +392,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropstart` to the
     </ul>
   </div>
   <div class="btn-group dropstart">
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropstart</span>
     </button>
     <ul class="dropdown-menu">
@@ -402,7 +402,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropstart` to the
       <li><hr class="dropdown-divider"></li>
       <li><a class="dropdown-item" href="#">Separated link</a></li>
     </ul>
-    <button type="button" class="btn btn-secondary">
+    <button type="button" class="btn btn-outline-secondary">
       Split dropstart
     </button>
   </div>
@@ -421,13 +421,13 @@ Trigger dropdown menus at the left of the elements by adding `.dropstart` to the
 
 <!-- Split dropstart button -->
 <div class="btn-group dropstart">
-  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropstart</span>
   </button>
   <ul class="dropdown-menu">
     <!-- Dropdown menu links -->
   </ul>
-  <button type="button" class="btn btn-secondary">
+  <button type="button" class="btn btn-outline-secondary">
     Split dropstart
   </button>
 </div>
@@ -757,8 +757,8 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
     </ul>
   </div>
   <div class="btn-group">
-    <button type="button" class="btn btn-secondary">Reference</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
+    <button type="button" class="btn btn-outline-secondary">Reference</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md
index b6205de1eb..0fef39b6ab 100644
--- a/site/content/docs/5.3/components/modal.md
+++ b/site/content/docs/5.3/components/modal.md
@@ -52,7 +52,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
           <p>Modal body text goes here.</p>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary">Save changes</button>
         </div>
       </div>
@@ -72,7 +72,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
         <p>Modal body text goes here.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -98,7 +98,7 @@ Modals may start with a picture. Add `.modal-img` to your `<img>` or `<svg>` tag
           <p>Modal body text goes here.</p>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary">Save changes</button>
         </div>
       </div>
@@ -119,7 +119,7 @@ Modals may start with a picture. Add `.modal-img` to your `<img>` or `<svg>` tag
         <p>Modal body text goes here.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -147,7 +147,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
         <p>Woo-hoo, you're reading this text in a modal!</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -178,7 +178,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -201,7 +201,7 @@ When backdrop is set to static, the modal will not close when clicking outside o
         <p>I will not close if you click outside of me. Don't even try to press escape key.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Understood</button>
       </div>
     </div>
@@ -232,7 +232,7 @@ When backdrop is set to static, the modal will not close when clicking outside o
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Understood</button>
       </div>
     </div>
@@ -255,7 +255,7 @@ When modals become too long for the user's viewport or device, they scroll indep
         <p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -283,7 +283,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi
         <p>This content should appear at the bottom after you scroll.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -318,7 +318,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
         <p>This is a vertically centered modal.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -338,7 +338,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
         <p>Just like that.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -385,7 +385,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
         <p><a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -448,7 +448,7 @@ Utilize the Boosted grid system within a modal by nesting `.container-fluid` wit
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
     </div>
@@ -523,7 +523,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
         </form>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Send message</button>
       </div>
     </div>
@@ -725,7 +725,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -742,7 +742,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -759,7 +759,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -776,7 +776,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -793,7 +793,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
@@ -810,7 +810,7 @@ Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 6daf9ba55e..0faf554a3f 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -443,26 +443,48 @@ sitemap_exclude: true
   <button type="button" class="btn btn-primary" disabled>Primary</button>
   <button type="button" class="btn btn-secondary">Secondary</button>
   <button type="button" class="btn btn-secondary" disabled>Secondary</button>
-  <button type="button" class="btn btn-outline-secondary">Outline secondary</button>
-  <button type="button" class="btn btn-outline-secondary" disabled>Outline secondary</button>
   <button type="button" class="btn btn-success">Success</button>
   <button type="button" class="btn btn-success" disabled>Success</button>
   <button type="button" class="btn btn-danger">Danger</button>
   <button type="button" class="btn btn-danger" disabled>Danger</button>
+  <button type="button" class="btn btn-warning">Warning</button>
+  <button type="button" class="btn btn-warning" disabled>Warning</button>
+  <button type="button" class="btn btn-info">Info</button>
+  <button type="button" class="btn btn-info" disabled>Info</button>
+  <button type="button" class="btn btn-light">Light</button>
+  <button type="button" class="btn btn-light" disabled>Light</button>
+  <button type="button" class="btn btn-dark">Dark</button>
+  <button type="button" class="btn btn-dark" disabled>Dark</button>
   <button type="button" class="btn btn-link">Link</button>
   <button type="button" class="btn btn-link" disabled>Link</button>
+  <button type="button" class="btn btn-outline-primary">Outline primary</button>
+  <button type="button" class="btn btn-outline-primary" disabled>Outline primary</button>
+  <button type="button" class="btn btn-outline-secondary">Outline secondary</button>
+  <button type="button" class="btn btn-outline-secondary" disabled>Outline secondary</button>
+  <button type="button" class="btn btn-outline-success">Outline success</button>
+  <button type="button" class="btn btn-outline-success" disabled>Outline success</button>
+  <button type="button" class="btn btn-outline-danger">Outline danger</button>
+  <button type="button" class="btn btn-outline-danger" disabled>Outline danger</button>
+  <button type="button" class="btn btn-outline-warning">Outline warning</button>
+  <button type="button" class="btn btn-outline-warning" disabled>Outline warning</button>
+  <button type="button" class="btn btn-outline-info">Outline info</button>
+  <button type="button" class="btn btn-outline-info" disabled>Outline info</button>
+  <button type="button" class="btn btn-outline-light">Outline light</button>
+  <button type="button" class="btn btn-outline-light" disabled>Outline light</button>
+  <button type="button" class="btn btn-outline-dark">Outline dark</button>
+  <button type="button" class="btn btn-outline-dark" disabled>Outline dark</button>
   <button type="button" class="btn btn-primary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
   <button type="button" class="btn btn-primary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
-  <button type="button" class="btn btn-icon btn-secondary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-secondary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <button type="button" class="btn btn-icon btn-no-outline"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <button type="button" class="btn btn-icon btn-no-outline" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a>
   <a class="btn btn-icon btn-social btn-youtube disabled"><span class="visually-hidden">YouTube</span></a>
   <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button">Large button</button></div>
   <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" disabled>Large button</button></div>
-  <div class="btn-group"><button class="btn btn-secondary" type="button">Large split button</button><button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"><span class="visually-hidden">Toggle Dropdown</span></button></div>
-  <div class="btn-group"><button class="btn btn-secondary" type="button" disabled>Large split button</button><button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" disabled><span class="visually-hidden">Toggle Dropdown</span></button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"><span class="visually-hidden">Toggle Dropdown</span></button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled>Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled><span class="visually-hidden">Toggle Dropdown</span></button></div>
 </div>
 
 <h4 class="mt-3">Dark theme on container</h4>
@@ -472,26 +494,48 @@ sitemap_exclude: true
   <button type="button" class="btn btn-primary" disabled>Primary</button>
   <button type="button" class="btn btn-secondary">Secondary</button>
   <button type="button" class="btn btn-secondary" disabled>Secondary</button>
-  <button type="button" class="btn btn-outline-secondary">Outline secondary</button>
-  <button type="button" class="btn btn-outline-secondary" disabled>Outline secondary</button>
   <button type="button" class="btn btn-success">Success</button>
   <button type="button" class="btn btn-success" disabled>Success</button>
   <button type="button" class="btn btn-danger">Danger</button>
   <button type="button" class="btn btn-danger" disabled>Danger</button>
+  <button type="button" class="btn btn-warning">Warning</button>
+  <button type="button" class="btn btn-warning" disabled>Warning</button>
+  <button type="button" class="btn btn-info">Info</button>
+  <button type="button" class="btn btn-info" disabled>Info</button>
+  <button type="button" class="btn btn-light">Light</button>
+  <button type="button" class="btn btn-light" disabled>Light</button>
+  <button type="button" class="btn btn-dark">Dark</button>
+  <button type="button" class="btn btn-dark" disabled>Dark</button>
   <button type="button" class="btn btn-link">Link</button>
   <button type="button" class="btn btn-link" disabled>Link</button>
+  <button type="button" class="btn btn-outline-primary">Outline primary</button>
+  <button type="button" class="btn btn-outline-primary" disabled>Outline primary</button>
+  <button type="button" class="btn btn-outline-secondary">Outline secondary</button>
+  <button type="button" class="btn btn-outline-secondary" disabled>Outline secondary</button>
+  <button type="button" class="btn btn-outline-success">Outline success</button>
+  <button type="button" class="btn btn-outline-success" disabled>Outline success</button>
+  <button type="button" class="btn btn-outline-danger">Outline danger</button>
+  <button type="button" class="btn btn-outline-danger" disabled>Outline danger</button>
+  <button type="button" class="btn btn-outline-warning">Outline warning</button>
+  <button type="button" class="btn btn-outline-warning" disabled>Outline warning</button>
+  <button type="button" class="btn btn-outline-info">Outline info</button>
+  <button type="button" class="btn btn-outline-info" disabled>Outline info</button>
+  <button type="button" class="btn btn-outline-light">Outline light</button>
+  <button type="button" class="btn btn-outline-light" disabled>Outline light</button>
+  <button type="button" class="btn btn-outline-dark">Outline dark</button>
+  <button type="button" class="btn btn-outline-dark" disabled>Outline dark</button>
   <button type="button" class="btn btn-primary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
   <button type="button" class="btn btn-primary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
-  <button type="button" class="btn btn-icon btn-secondary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-secondary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <button type="button" class="btn btn-icon btn-no-outline"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <button type="button" class="btn btn-icon btn-no-outline" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a>
   <a class="btn btn-icon btn-social btn-youtube disabled"><span class="visually-hidden">YouTube</span></a>
   <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button">Large button</button></div>
   <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" disabled>Large button</button></div>
-  <div class="btn-group"><button class="btn btn-secondary" type="button">Large split button</button><button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"><span class="visually-hidden">Toggle Dropdown</span></button></div>
-  <div class="btn-group"><button class="btn btn-secondary" type="button" disabled>Large split button</button><button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" disabled><span class="visually-hidden">Toggle Dropdown</span></button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"><span class="visually-hidden">Toggle Dropdown</span></button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled>Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled><span class="visually-hidden">Toggle Dropdown</span></button></div>
 </div>
 
 <h4 class="mt-3">Light theme on container</h4>
@@ -501,26 +545,48 @@ sitemap_exclude: true
   <button type="button" class="btn btn-primary" disabled>Primary</button>
   <button type="button" class="btn btn-secondary">Secondary</button>
   <button type="button" class="btn btn-secondary" disabled>Secondary</button>
-  <button type="button" class="btn btn-outline-secondary">Outline secondary</button>
-  <button type="button" class="btn btn-outline-secondary" disabled>Outline secondary</button>
   <button type="button" class="btn btn-success">Success</button>
   <button type="button" class="btn btn-success" disabled>Success</button>
   <button type="button" class="btn btn-danger">Danger</button>
   <button type="button" class="btn btn-danger" disabled>Danger</button>
+  <button type="button" class="btn btn-warning">Warning</button>
+  <button type="button" class="btn btn-warning" disabled>Warning</button>
+  <button type="button" class="btn btn-info">Info</button>
+  <button type="button" class="btn btn-info" disabled>Info</button>
+  <button type="button" class="btn btn-light">Light</button>
+  <button type="button" class="btn btn-light" disabled>Light</button>
+  <button type="button" class="btn btn-dark">Dark</button>
+  <button type="button" class="btn btn-dark" disabled>Dark</button>
   <button type="button" class="btn btn-link">Link</button>
   <button type="button" class="btn btn-link" disabled>Link</button>
+  <button type="button" class="btn btn-outline-primary">Outline primary</button>
+  <button type="button" class="btn btn-outline-primary" disabled>Outline primary</button>
+  <button type="button" class="btn btn-outline-secondary">Outline secondary</button>
+  <button type="button" class="btn btn-outline-secondary" disabled>Outline secondary</button>
+  <button type="button" class="btn btn-outline-success">Outline success</button>
+  <button type="button" class="btn btn-outline-success" disabled>Outline success</button>
+  <button type="button" class="btn btn-outline-danger">Outline danger</button>
+  <button type="button" class="btn btn-outline-danger" disabled>Outline danger</button>
+  <button type="button" class="btn btn-outline-warning">Outline warning</button>
+  <button type="button" class="btn btn-outline-warning" disabled>Outline warning</button>
+  <button type="button" class="btn btn-outline-info">Outline info</button>
+  <button type="button" class="btn btn-outline-info" disabled>Outline info</button>
+  <button type="button" class="btn btn-outline-light">Outline light</button>
+  <button type="button" class="btn btn-outline-light" disabled>Outline light</button>
+  <button type="button" class="btn btn-outline-dark">Outline dark</button>
+  <button type="button" class="btn btn-outline-dark" disabled>Outline dark</button>
   <button type="button" class="btn btn-primary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
   <button type="button" class="btn btn-primary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
-  <button type="button" class="btn btn-icon btn-secondary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-secondary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <button type="button" class="btn btn-icon btn-no-outline"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <button type="button" class="btn btn-icon btn-no-outline" disabled><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <a href="#" class="btn btn-icon btn-social btn-youtube"><span class="visually-hidden">YouTube</span></a>
   <a class="btn btn-icon btn-social btn-youtube disabled"><span class="visually-hidden">YouTube</span></a>
   <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button">Large button</button></div>
   <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" disabled>Large button</button></div>
-  <div class="btn-group"><button class="btn btn-secondary" type="button">Large split button</button><button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"><span class="visually-hidden">Toggle Dropdown</span></button></div>
-  <div class="btn-group"><button class="btn btn-secondary" type="button" disabled>Large split button</button><button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" disabled><span class="visually-hidden">Toggle Dropdown</span></button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"><span class="visually-hidden">Toggle Dropdown</span></button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled>Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled><span class="visually-hidden">Toggle Dropdown</span></button></div>
 </div>
 
 <h4 class="mt-3">Dark theme on component</h4>
@@ -530,26 +596,48 @@ sitemap_exclude: true
   <button type="button" class="btn btn-primary" disabled data-bs-theme="dark">Primary</button>
   <button type="button" class="btn btn-secondary" data-bs-theme="dark">Secondary</button>
   <button type="button" class="btn btn-secondary" disabled data-bs-theme="dark">Secondary</button>
-  <button type="button" class="btn btn-outline-secondary" data-bs-theme="dark">Outline secondary</button>
-  <button type="button" class="btn btn-outline-secondary" disabled data-bs-theme="dark">Outline secondary</button>
   <button type="button" class="btn btn-success" data-bs-theme="dark">Success</button>
   <button type="button" class="btn btn-success" disabled data-bs-theme="dark">Success</button>
   <button type="button" class="btn btn-danger" data-bs-theme="dark">Danger</button>
   <button type="button" class="btn btn-danger" disabled data-bs-theme="dark">Danger</button>
+  <button type="button" class="btn btn-warning" data-bs-theme="dark">Warning</button>
+  <button type="button" class="btn btn-warning" disabled data-bs-theme="dark">Warning</button>
+  <button type="button" class="btn btn-info" data-bs-theme="dark">Info</button>
+  <button type="button" class="btn btn-info" disabled data-bs-theme="dark">Info</button>
+  <button type="button" class="btn btn-light" data-bs-theme="dark">Light</button>
+  <button type="button" class="btn btn-light" disabled data-bs-theme="dark">Light</button>
+  <button type="button" class="btn btn-dark" data-bs-theme="dark">Dark</button>
+  <button type="button" class="btn btn-dark" disabled data-bs-theme="dark">Dark</button>
   <button type="button" class="btn btn-link" data-bs-theme="dark">Link</button>
   <button type="button" class="btn btn-link" disabled data-bs-theme="dark">Link</button>
+  <button type="button" class="btn btn-outline-primary" data-bs-theme="dark">Outline primary</button>
+  <button type="button" class="btn btn-outline-primary" disabled data-bs-theme="dark">Outline primary</button>
+  <button type="button" class="btn btn-outline-secondary" data-bs-theme="dark">Outline secondary</button>
+  <button type="button" class="btn btn-outline-secondary" disabled data-bs-theme="dark">Outline secondary</button>
+  <button type="button" class="btn btn-outline-success" data-bs-theme="dark">Outline success</button>
+  <button type="button" class="btn btn-outline-success" disabled data-bs-theme="dark">Outline success</button>
+  <button type="button" class="btn btn-outline-danger" data-bs-theme="dark">Outline danger</button>
+  <button type="button" class="btn btn-outline-danger" disabled data-bs-theme="dark">Outline danger</button>
+  <button type="button" class="btn btn-outline-warning" data-bs-theme="dark">Outline warning</button>
+  <button type="button" class="btn btn-outline-warning" disabled data-bs-theme="dark">Outline warning</button>
+  <button type="button" class="btn btn-outline-info" data-bs-theme="dark">Outline info</button>
+  <button type="button" class="btn btn-outline-info" disabled data-bs-theme="dark">Outline info</button>
+  <button type="button" class="btn btn-outline-light" data-bs-theme="dark">Outline light</button>
+  <button type="button" class="btn btn-outline-light" disabled data-bs-theme="dark">Outline light</button>
+  <button type="button" class="btn btn-outline-dark" data-bs-theme="dark">Outline dark</button>
+  <button type="button" class="btn btn-outline-dark" disabled data-bs-theme="dark">Outline dark</button>
   <button type="button" class="btn btn-primary" data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
   <button type="button" class="btn btn-primary" disabled data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
-  <button type="button" class="btn btn-icon btn-secondary" data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-secondary" disabled data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <button type="button" class="btn btn-icon btn-no-outline" data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-theme="dark"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <a href="#" class="btn btn-icon btn-social btn-youtube" data-bs-theme="dark"><span class="visually-hidden">YouTube</span></a>
   <a class="btn btn-icon btn-social btn-youtube disabled" data-bs-theme="dark"><span class="visually-hidden">YouTube</span></a>
   <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" data-bs-theme="dark">Large button</button></div>
   <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" disabled data-bs-theme="dark">Large button</button></div>
-  <div class="btn-group"><button class="btn btn-secondary" type="button" data-bs-theme="dark">Large split button</button><button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-theme="dark"><span class="visually-hidden">Toggle Dropdown</span></button></div>
-  <div class="btn-group"><button class="btn btn-secondary" type="button" disabled data-bs-theme="dark">Large split button</button><button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" disabled data-bs-theme="dark"><span class="visually-hidden">Toggle Dropdown</span></button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button" data-bs-theme="dark">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-theme="dark"><span class="visually-hidden">Toggle Dropdown</span></button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled data-bs-theme="dark">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled data-bs-theme="dark"><span class="visually-hidden">Toggle Dropdown</span></button></div>
 </div>
 
 <h4 class="mt-3">Light theme on component</h4>
@@ -559,26 +647,48 @@ sitemap_exclude: true
   <button type="button" class="btn btn-primary" disabled data-bs-theme="light">Primary</button>
   <button type="button" class="btn btn-secondary" data-bs-theme="light">Secondary</button>
   <button type="button" class="btn btn-secondary" disabled data-bs-theme="light">Secondary</button>
-  <button type="button" class="btn btn-outline-secondary" data-bs-theme="light">Outline secondary</button>
-  <button type="button" class="btn btn-outline-secondary" disabled data-bs-theme="light">Outline secondary</button>
   <button type="button" class="btn btn-success" data-bs-theme="light">Success</button>
   <button type="button" class="btn btn-success" disabled data-bs-theme="light">Success</button>
   <button type="button" class="btn btn-danger" data-bs-theme="light">Danger</button>
   <button type="button" class="btn btn-danger" disabled data-bs-theme="light">Danger</button>
+  <button type="button" class="btn btn-warning" data-bs-theme="light">Warning</button>
+  <button type="button" class="btn btn-warning" disabled data-bs-theme="light">Warning</button>
+  <button type="button" class="btn btn-info" data-bs-theme="light">Info</button>
+  <button type="button" class="btn btn-info" disabled data-bs-theme="light">Info</button>
+  <button type="button" class="btn btn-light" data-bs-theme="light">Light</button>
+  <button type="button" class="btn btn-light" disabled data-bs-theme="light">Light</button>
+  <button type="button" class="btn btn-dark" data-bs-theme="light">Dark</button>
+  <button type="button" class="btn btn-dark" disabled data-bs-theme="light">Dark</button>
   <button type="button" class="btn btn-link" data-bs-theme="light">Link</button>
   <button type="button" class="btn btn-link" disabled data-bs-theme="light">Link</button>
+  <button type="button" class="btn btn-outline-primary" data-bs-theme="light">Outline primary</button>
+  <button type="button" class="btn btn-outline-primary" disabled data-bs-theme="light">Outline primary</button>
+  <button type="button" class="btn btn-outline-secondary" data-bs-theme="light">Outline secondary</button>
+  <button type="button" class="btn btn-outline-secondary" disabled data-bs-theme="light">Outline secondary</button>
+  <button type="button" class="btn btn-outline-success" data-bs-theme="light">Outline success</button>
+  <button type="button" class="btn btn-outline-success" disabled data-bs-theme="light">Outline success</button>
+  <button type="button" class="btn btn-outline-danger" data-bs-theme="light">Outline danger</button>
+  <button type="button" class="btn btn-outline-danger" disabled data-bs-theme="light">Outline danger</button>
+  <button type="button" class="btn btn-outline-warning" data-bs-theme="light">Outline warning</button>
+  <button type="button" class="btn btn-outline-warning" disabled data-bs-theme="light">Outline warning</button>
+  <button type="button" class="btn btn-outline-info" data-bs-theme="light">Outline info</button>
+  <button type="button" class="btn btn-outline-info" disabled data-bs-theme="light">Outline info</button>
+  <button type="button" class="btn btn-outline-light" data-bs-theme="light">Outline light</button>
+  <button type="button" class="btn btn-outline-light" disabled data-bs-theme="light">Outline light</button>
+  <button type="button" class="btn btn-outline-dark" data-bs-theme="light">Outline dark</button>
+  <button type="button" class="btn btn-outline-dark" disabled data-bs-theme="light">Outline dark</button>
   <button type="button" class="btn btn-primary" data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
   <button type="button" class="btn btn-primary" disabled data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg>Primary</button>
-  <button type="button" class="btn btn-icon btn-secondary" data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
-  <button type="button" class="btn btn-icon btn-secondary" disabled data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
+  <button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <button type="button" class="btn btn-icon btn-no-outline" data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-theme="light"><svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/></svg></button>
   <a href="#" class="btn btn-icon btn-social btn-youtube" data-bs-theme="light"><span class="visually-hidden">YouTube</span></a>
   <a class="btn btn-icon btn-social btn-youtube disabled" data-bs-theme="light"><span class="visually-hidden">YouTube</span></a>
   <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" data-bs-theme="light">Large button</button></div>
   <div class="btn-group"><button class="btn btn-secondary dropdown-toggle" type="button" disabled data-bs-theme="light">Large button</button></div>
-  <div class="btn-group"><button class="btn btn-secondary" type="button" data-bs-theme="light">Large split button</button><button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-theme="light"><span class="visually-hidden">Toggle Dropdown</span></button></div>
-  <div class="btn-group"><button class="btn btn-secondary" type="button" disabled data-bs-theme="light">Large split button</button><button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" disabled data-bs-theme="light"><span class="visually-hidden">Toggle Dropdown</span></button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button" data-bs-theme="light">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-theme="light"><span class="visually-hidden">Toggle Dropdown</span></button></div>
+  <div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled data-bs-theme="light">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled data-bs-theme="light"><span class="visually-hidden">Toggle Dropdown</span></button></div>
 </div>
 
 ### Dropdowns
@@ -600,8 +710,8 @@ sitemap_exclude: true
   </div>
 
   <div class="btn-group">
-    <button type="button" class="btn btn-secondary">Action</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary">Action</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -631,8 +741,8 @@ sitemap_exclude: true
   </div>
 
   <div class="btn-group">
-    <button type="button" class="btn btn-secondary">Action</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary">Action</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -662,8 +772,8 @@ sitemap_exclude: true
   </div>
 
   <div class="btn-group">
-    <button type="button" class="btn btn-secondary">Action</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-outline-secondary">Action</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
@@ -693,8 +803,8 @@ sitemap_exclude: true
   </div>
 
   <div class="btn-group">
-    <button type="button" class="btn btn-secondary" data-bs-theme="dark">Action</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">
+    <button type="button" class="btn btn-outline-secondary" data-bs-theme="dark">Action</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="dark">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu" data-bs-theme="dark">
@@ -724,8 +834,8 @@ sitemap_exclude: true
   </div>
 
   <div class="btn-group">
-    <button type="button" class="btn btn-secondary" data-bs-theme="light">Action</button>
-    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="light">
+    <button type="button" class="btn btn-outline-secondary" data-bs-theme="light">Action</button>
+    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-theme="light">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu" data-bs-theme="light">
@@ -741,24 +851,22 @@ sitemap_exclude: true
 <h4 class="mt-3">Dark dropdown variant for retro-compatibility</h4>
 
 <div class="border border-tertiary p-3 bg-dark">
-  <div class="btn-group">
-    <div class="dropdown">
-      <button class="btn btn-secondary btn-inverse dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-        Dropdown button
-      </button>
-      <ul class="dropdown-menu dropdown-menu-dark">
-        <li><a class="dropdown-item active" href="#">Action</a></li>
-        <li><a class="dropdown-item" href="#">Another action</a></li>
-        <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
-        <li><hr class="dropdown-divider"></li>
-        <li><a class="dropdown-item" href="#">Separated link</a></li>
-      </ul>
-    </div>
+  <div class="dropdown">
+    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+      Dropdown button
+    </button>
+    <ul class="dropdown-menu dropdown-menu-dark">
+      <li><a class="dropdown-item active" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item disabled" aria-disabled="true">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
   </div>
 
   <div class="btn-group">
-    <button type="button" class="btn btn-secondary btn-inverse">Action</button>
-    <button type="button" class="btn btn-secondary btn-inverse dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-secondary">Action</button>
+    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
       <span class="visually-hidden">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu dropdown-menu-dark">
diff --git a/site/content/docs/5.3/examples/download-app/index.html b/site/content/docs/5.3/examples/download-app/index.html
index 1f0f96ea1c..ff0190b611 100644
--- a/site/content/docs/5.3/examples/download-app/index.html
+++ b/site/content/docs/5.3/examples/download-app/index.html
@@ -284,7 +284,7 @@ <h2 class="h1 mb-0 mb-md-5 text-primary text-center" id="download-notice">How to
               <li>
                 <span class="tag mt-md-3 mb-3 border-primary">1</span>
                 <span class="d-inline-block fw-bold mb-3">Register with your Google store account to our <a href="https://groups.google.com/g/odsapp" target="_blank" rel="noopener">Beta program list</a></span>
-                <a href="https://groups.google.com/g/odsapp" target="_blank" rel="noopener" class="btn btn-secondary mb-md-3">Register</a>
+                <a href="https://groups.google.com/g/odsapp" target="_blank" rel="noopener" class="btn btn-outline-secondary mb-md-3">Register</a>
               </li>
               <li class="vr mx-auto my-4 bg-light custom-vr"></li>
               <li>
diff --git a/site/content/docs/5.3/forms/input-group.md b/site/content/docs/5.3/forms/input-group.md
index 074a73d1aa..cc3839289b 100644
--- a/site/content/docs/5.3/forms/input-group.md
+++ b/site/content/docs/5.3/forms/input-group.md
@@ -162,25 +162,25 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
 
 {{< example >}}
 <div class="input-group mb-3">
-  <button class="btn btn-secondary" type="button" id="button-addon1">Button</button>
+  <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
   <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
 </div>
 
 <div class="input-group mb-3">
   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
-  <button class="btn btn-secondary" type="button" id="button-addon2">Button</button>
+  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
 </div>
 
 <div class="input-group mb-3">
-  <button class="btn btn-secondary" type="button">Button</button>
-  <button class="btn btn-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
   <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
 </div>
 
 <div class="input-group">
   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
-  <button class="btn btn-secondary" type="button">Button</button>
-  <button class="btn btn-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
 </div>
 {{< /example >}}
 
@@ -242,8 +242,8 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
 
 {{< example >}}
 <div class="input-group mb-3">
-  <button type="button" class="btn btn-secondary">Action</button>
-  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-outline-secondary">Action</button>
+  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu">
@@ -258,8 +258,8 @@ Please refer to the [Forms](https://system.design.orange.com/0c1af118d/p/88ab5b-
 
 <div class="input-group">
   <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
-  <button type="button" class="btn btn-secondary">Action</button>
-  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+  <button type="button" class="btn btn-outline-secondary">Action</button>
+  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
     <span class="visually-hidden">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu dropdown-menu-end">
@@ -300,7 +300,7 @@ Input groups include support for custom selects and custom file inputs. Browser
 </div>
 
 <div class="input-group mb-3">
-  <button class="btn btn-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
   <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
     <option selected>Choose...</option>
     <option value="1">One</option>
@@ -316,7 +316,7 @@ Input groups include support for custom selects and custom file inputs. Browser
     <option value="2">Two</option>
     <option value="3">Three</option>
   </select>
-  <button class="btn btn-secondary" type="button">Button</button>
+  <button class="btn btn-outline-secondary" type="button">Button</button>
 </div>
 {{< /example >}}
 
@@ -324,23 +324,23 @@ Input groups include support for custom selects and custom file inputs. Browser
 
 {{< example >}}
 <div class="input-group mb-3">
-  <label for="inputGroupFile01" class="input-group-text">Upload</label>
+  <label class="input-group-text" for="inputGroupFile01">Upload</label>
   <input type="file" class="form-control" id="inputGroupFile01">
 </div>
 
 <div class="input-group mb-3">
   <input type="file" class="form-control" id="inputGroupFile02">
-  <label for="inputGroupFile02" class="input-group-text">Upload</label>
+  <label class="input-group-text" for="inputGroupFile02">Upload</label>
 </div>
 
 <div class="input-group mb-3">
-  <button class="btn btn-secondary" type="button" id="inputGroupFileAddon03">Button</button>
+  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
   <input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload">
 </div>
 
 <div class="input-group">
   <input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
-  <button class="btn btn-secondary" type="button" id="inputGroupFileAddon04">Button</button>
+  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
 </div>
 {{< /example >}}
 
diff --git a/site/content/docs/5.3/forms/quantity-selector.md b/site/content/docs/5.3/forms/quantity-selector.md
index fcb57c1821..26474d96d8 100644
--- a/site/content/docs/5.3/forms/quantity-selector.md
+++ b/site/content/docs/5.3/forms/quantity-selector.md
@@ -24,10 +24,10 @@ Value will vary between the values defined for the `min` and `max` attributes (n
 {{< example >}}
 <div class="input-group quantity-selector">
   <input type="number" id="inputQuantitySelector" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
-  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
+  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
     <span class="visually-hidden">Step down</span>
   </button>
-  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector" data-bs-step="up">
+  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="up">
     <span class="visually-hidden">Step up</span>
   </button>
 </div>
@@ -40,10 +40,10 @@ Set small size using the contextual class `.quantity-selector-sm`.
 {{< example >}}
 <div class="input-group quantity-selector quantity-selector-sm">
   <input type="number" id="inputQuantitySelectorSm" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
-  <button type="button" class="btn btn-icon btn-secondary btn-sm" aria-describedby="inputQuantitySelectorSm" data-bs-step="down">
+  <button type="button" class="btn btn-icon btn-outline-secondary btn-sm" aria-describedby="inputQuantitySelectorSm" data-bs-step="down">
     <span class="visually-hidden">Step down</span>
   </button>
-  <button type="button" class="btn btn-icon btn-secondary btn-sm" aria-describedby="inputQuantitySelectorSm" data-bs-step="up">
+  <button type="button" class="btn btn-icon btn-outline-secondary btn-sm" aria-describedby="inputQuantitySelectorSm" data-bs-step="up">
     <span class="visually-hidden">Step up</span>
   </button>
 </div>
@@ -56,10 +56,10 @@ Add the `disabled` boolean attribute on quantity selector elements to give it a
 {{< example >}}
 <div class="input-group quantity-selector">
   <input type="number" id="inputQuantitySelectorDisabled" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="0" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector" disabled>
-  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="down" disabled>
+  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="down" disabled>
     <span class="visually-hidden">Step down</span>
   </button>
-  <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="up" disabled>
+  <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelectorDisabled" data-bs-step="up" disabled>
     <span class="visually-hidden">Step up</span>
   </button>
 </div>
diff --git a/site/content/docs/5.3/forms/validation.md b/site/content/docs/5.3/forms/validation.md
index 3ea668e40b..8ac8499ecb 100644
--- a/site/content/docs/5.3/forms/validation.md
+++ b/site/content/docs/5.3/forms/validation.md
@@ -286,10 +286,10 @@ Validation styles are available for the following form controls and components:
     <label for="inputQuantitySelector" class="form-label">Quantity selector</label>
     <div class="input-group quantity-selector w-100">
       <input type="number" id="inputQuantitySelector" class="form-control" aria-live="polite" data-bs-step="counter" name="quantity" title="quantity" value="11" min="0" max="10" step="1" data-bs-round="0" aria-label="Quantity selector">
-      <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
+      <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="down">
         <span class="visually-hidden">Step down</span>
       </button>
-      <button type="button" class="btn btn-icon btn-secondary" aria-describedby="inputQuantitySelector" data-bs-step="up">
+      <button type="button" class="btn btn-icon btn-outline-secondary" aria-describedby="inputQuantitySelector" data-bs-step="up">
         <span class="visually-hidden">Step up</span>
       </button>
       <div class="invalid-feedback">Please enter a valid number.</div>
diff --git a/site/content/docs/5.3/helpers/stacks.md b/site/content/docs/5.3/helpers/stacks.md
index 2e1512358b..488a6545ce 100644
--- a/site/content/docs/5.3/helpers/stacks.md
+++ b/site/content/docs/5.3/helpers/stacks.md
@@ -64,23 +64,23 @@ And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}):
 
 Use `.vstack` to stack buttons and other elements:
 
-<!-- Boosted mod: primary and secondary buttons -->
+<!-- Boosted mod: primary and outline secondary buttons -->
 {{< example >}}
 <div class="vstack gap-2 col-md-5 mx-auto">
   <button type="button" class="btn btn-primary">Save changes</button>
-  <button type="button" class="btn btn-secondary">Cancel</button>
+  <button type="button" class="btn btn-outline-secondary">Cancel</button>
 </div>
 {{< /example >}}
 
 Create an inline form with `.hstack`:
 
-<!-- Boosted mod: primary and secondary button -->
+<!-- Boosted mod: primary and outline secondary button -->
 {{< example >}}
 <div class="hstack gap-3">
   <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
   <button type="button" class="btn btn-primary">Submit</button>
   <div class="vr"></div>
-  <button type="button" class="btn btn-secondary">Reset</button>
+  <button type="button" class="btn btn-outline-secondary">Reset</button>
 </div>
 {{< /example >}}
 
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index 78fcc39fc1..7be9d3a220 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -21,7 +21,7 @@ <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
             {{- if .Page.Params.added -}}
               <p class="mb-0 me-2"><span class="tag tag-sm">Added in v{{ .Page.Params.added }}</span></p>
             {{- end -}}
-            <a class="btn btn-sm" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
+            <a class="btn btn-sm btn-outline-secondary" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
               View on GitHub
             </a>
           </div>
@@ -33,7 +33,7 @@ <h1 class="bd-title mb-0" id="content">{{ .Title | markdownify }}</h1>
 
       {{ if (eq .Page.Params.toc true) }}
         <div class="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary">
-          <button class="btn btn-secondary p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
+          <button class="btn btn-outline-secondary p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
             On this page
             <svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
           </button>
diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html
index 1d7f62c4fd..a01ee5b565 100644
--- a/site/layouts/partials/docs-subnav.html
+++ b/site/layouts/partials/docs-subnav.html
@@ -2,7 +2,7 @@
 
 <nav class="bd-subnavbar py-2 d-lg-none" aria-label="Secondary navigation">
   <div class="container-xxl d-flex justify-content-end">
-    <button class="btn btn-secondary btn-icon p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
+    <button class="btn btn-outline-secondary btn-icon p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
         <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"></path>
       </svg>
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index b2ee666396..f215b508cd 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -90,7 +90,7 @@ <h3 class="accordion-header footer-heading" id="headingCommunity">
 </footer>
 <!-- Boosted mod: back-to-top component -->
 <nav aria-label="Back to top" class="back-to-top">
-  <a href="#top" class="back-to-top-link btn btn-icon btn-secondary" data-bs-label="Back to top">
+  <a href="#top" class="back-to-top-link btn btn-icon btn-outline-secondary" data-bs-label="Back to top">
     <span class="visually-hidden">Back to top</span>
   </a>
 </nav>
diff --git a/site/layouts/shortcodes/card.html b/site/layouts/shortcodes/card.html
index 1653c7a0ab..c95af1aedd 100644
--- a/site/layouts/shortcodes/card.html
+++ b/site/layouts/shortcodes/card.html
@@ -57,7 +57,7 @@ <h3 class="card-title{{ if and $metadata (not $caption) }} mb-3{{ end }}">{{ if
     </ul>
     {{- end -}}
     {{- if $action -}}
-    <a href="#" class="btn btn-secondary" aria-label="{{ if $rtl }}وصف الارتباط{{ else }}Link description{{ end }}" title="{{ if $rtl }}وصف الارتباط{{ else }}Link description{{ end }}">{{ if $rtl }}وصلة{{ else }}Link{{ end }}</a>
+    <a href="#" class="btn btn-outline-secondary" aria-label="{{ if $rtl }}وصف الارتباط{{ else }}Link description{{ end }}" title="{{ if $rtl }}وصف الارتباط{{ else }}Link description{{ end }}">{{ if $rtl }}وصلة{{ else }}Link{{ end }}</a>
     {{- end -}}
   </div>
 </div>
diff --git a/site/layouts/shortcodes/orange-footer.html b/site/layouts/shortcodes/orange-footer.html
index 0b18efffa2..9259373da6 100644
--- a/site/layouts/shortcodes/orange-footer.html
+++ b/site/layouts/shortcodes/orange-footer.html
@@ -31,7 +31,7 @@ <h3 class="footer-heading">Sign up to our mailing list</h3>
       <form class="d-flex col-12 col-md-9 col-lg-7 col-xl-6 col-xxl-5 gap-2 gap-md-3">
         <label for="inputEmail{{ $id }}" class="visually-hidden">Email</label>
         <input type="email" class="form-control text-bg-dark border-dark" id="inputEmail{{ $id }}" placeholder="Enter your email">
-        <button type="submit" class="btn btn-secondary text-nowrap">Sign up</button>
+        <button type="submit" class="btn btn-outline-secondary text-nowrap">Sign up</button>
       </form>
     </div>
   </div>