diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 060d9002ee..6947efaa74 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -272,7 +272,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
             target,
           };
     let fill = this.fill;
-    if (fill === undefined) {
+    /**
+     * We check both undefined and null to
+     * work around https://github.com/ionic-team/stencil/issues/3586.
+     */
+    if (fill == null) {
       fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
     }
     return (
diff --git a/core/src/components/button/test/basic/button.e2e.ts b/core/src/components/button/test/basic/button.e2e.ts
index 50a7270497..69461a8a93 100644
--- a/core/src/components/button/test/basic/button.e2e.ts
+++ b/core/src/components/button/test/basic/button.e2e.ts
@@ -9,6 +9,25 @@ test.describe('button: basic', () => {
 
     expect(await page.screenshot()).toMatchSnapshot(`button-diff-${page.getSnapshotSettings()}.png`);
   });
+  test('should correctly set fill to undefined', async ({ page, skip }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/25886',
+    });
+    skip.rtl();
+    skip.mode('ios', 'This behavior does not differ across modes');
+    await page.setContent(`
+      <ion-button fill="outline"></ion-button>
+    `);
+
+    const button = page.locator('ion-button');
+    await expect(button).toHaveClass(/button-outline/);
+
+    await button.evaluate((el: HTMLIonButtonElement) => (el.fill = undefined));
+    await page.waitForChanges();
+
+    await expect(button).toHaveClass(/button-solid/);
+  });
 });
 
 test.describe('button: ripple effect', () => {