diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md
index 6ae19eb95..963bc903a 100644
--- a/docs/docs/components/button.md
+++ b/docs/docs/components/button.md
@@ -110,54 +110,54 @@ Use the `prefix` and `suffix` slots to add icons.
 
 ```html {.example}
 <wa-button size="small">
-  <wa-icon slot="prefix" name="gear" variant="filled"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
   Settings
 </wa-button>
 
 <wa-button size="small">
-  <wa-icon slot="suffix" name="undo" variant="filled"></wa-icon>
+  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
   Refresh
 </wa-button>
 
 <wa-button size="small">
-  <wa-icon slot="prefix" name="link" variant="filled"></wa-icon>
-  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="filled"></wa-icon>
+  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
+  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
   Open
 </wa-button>
 
 <br /><br />
 
 <wa-button>
-  <wa-icon slot="prefix" name="gear" variant="filled"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
   Settings
 </wa-button>
 
 <wa-button>
-  <wa-icon slot="suffix" name="undo" variant="filled"></wa-icon>
+  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
   Refresh
 </wa-button>
 
 <wa-button>
-  <wa-icon slot="prefix" name="link" variant="filled"></wa-icon>
-  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="filled"></wa-icon>
+  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
+  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
   Open
 </wa-button>
 
 <br /><br />
 
 <wa-button size="large">
-  <wa-icon slot="prefix" name="gear" variant="filled"></wa-icon>
+  <wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
   Settings
 </wa-button>
 
 <wa-button size="large">
-  <wa-icon slot="suffix" name="undo" variant="filled"></wa-icon>
+  <wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
   Refresh
 </wa-button>
 
 <wa-button size="large">
-  <wa-icon slot="prefix" name="link" variant="filled"></wa-icon>
-  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="filled"></wa-icon>
+  <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
+  <wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
   Open
 </wa-button>
 ```
@@ -206,7 +206,7 @@ This example demonstrates how to style buttons using a custom class. This is the
 <style>
   wa-button.pink::part(base) {
     border-radius: 6px;
-    border: filled 2px;
+    border: solid 2px;
     background: #ff1493;
     border-top-color: #ff7ac1;
     border-left-color: #ff7ac1;
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index 7ffada5c7..3e3d2f1d3 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -266,7 +266,7 @@ export default css`
 
   @media (forced-colors: active) {
     .button.button--outline.button--checked:not(.button--disabled) {
-      outline: filled 2px transparent;
+      outline: solid 2px transparent;
     }
   }
 
@@ -448,7 +448,7 @@ export default css`
     top: 0;
     inset-inline-start: 0;
     bottom: 0;
-    border-left: filled max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3));
+    border-left: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3));
     z-index: 2; /* Keep separators visible on hover */
   }
 
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index c6f906b9e..f1aaa9896 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -290,7 +290,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
                   class="button__caret"
                   library="system"
                   name="chevron-down"
-                  variant="filled"
+                  variant="solid"
                 ></wa-icon>
               `
             : ''