diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts b/core/src/components/button/test/basic/button.e2e-legacy.ts
deleted file mode 100644
index 02b6093fc4..0000000000
--- a/core/src/components/button/test/basic/button.e2e-legacy.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('button: basic', () => {
-  test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/button/test/basic`);
-
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`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', () => {
-  test('should not have visual regressions', async ({ page, skip }) => {
-    skip.mode('ios', 'Ripple effect is only available in MD mode.');
-
-    await page.goto(`/src/components/button/test/basic?ionic:_testing=false`);
-
-    const button = page.locator('#default');
-
-    await button.scrollIntoViewIfNeeded();
-
-    const boundingBox = await button.boundingBox();
-
-    if (boundingBox) {
-      await page.mouse.move(boundingBox.x + boundingBox.width / 2, boundingBox.y + boundingBox.height / 2);
-      await page.mouse.down();
-    }
-
-    await page.waitForSelector('#default.ion-activated');
-
-    await expect(button).toHaveScreenshot(`button-ripple-effect-${page.getSnapshotSettings()}.png`, {
-      animations: 'disabled',
-    });
-  });
-});
diff --git a/core/src/components/button/test/basic/button.e2e.ts b/core/src/components/button/test/basic/button.e2e.ts
new file mode 100644
index 0000000000..2480c2fb2f
--- /dev/null
+++ b/core/src/components/button/test/basic/button.e2e.ts
@@ -0,0 +1,65 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ config, screenshot, title }) => {
+  test.describe(title('button: basic'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/button/test/basic`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`button-diff`));
+    });
+  });
+});
+
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ config, title }) => {
+  test.describe(title('button: basic'), () => {
+    test('should correctly set fill to undefined', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/25886',
+      });
+      await page.setContent(
+        `
+        <ion-button fill="outline"></ion-button>
+      `,
+        config
+      );
+
+      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/);
+    });
+  });
+});
+
+/**
+ * Ripple effect is only available in MD mode.
+ */
+configs({ modes: ['md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('button: ripple effect'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/button/test/basic?ionic:_testing=false`, config);
+
+      const button = page.locator('#default');
+
+      await button.scrollIntoViewIfNeeded();
+
+      const boundingBox = await button.boundingBox();
+
+      if (boundingBox) {
+        await page.mouse.move(boundingBox.x + boundingBox.width / 2, boundingBox.y + boundingBox.height / 2);
+        await page.mouse.down();
+      }
+
+      await page.waitForSelector('#default.ion-activated');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-ripple-effect`));
+    });
+  });
+});
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-diff-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/basic/button.e2e-legacy.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/button/test/basic/button.e2e.ts-snapshots/button-ripple-effect-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/clear/button.e2e-legacy.ts b/core/src/components/button/test/clear/button.e2e-legacy.ts
deleted file mode 100644
index a8ef434f25..0000000000
--- a/core/src/components/button/test/clear/button.e2e-legacy.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('button: clear', () => {
-  test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/button/test/clear`);
-
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`button-clear-${page.getSnapshotSettings()}.png`);
-  });
-});
diff --git a/core/src/components/button/test/clear/button.e2e.ts b/core/src/components/button/test/clear/button.e2e.ts
new file mode 100644
index 0000000000..92190aec08
--- /dev/null
+++ b/core/src/components/button/test/clear/button.e2e.ts
@@ -0,0 +1,14 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, config, screenshot }) => {
+  test.describe(title('button: clear'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/button/test/clear`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`button-clear`));
+    });
+  });
+});
diff --git a/core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/clear/button.e2e-legacy.ts-snapshots/button-clear-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/expand/button.e2e-legacy.ts b/core/src/components/button/test/expand/button.e2e-legacy.ts
deleted file mode 100644
index f6861f23bb..0000000000
--- a/core/src/components/button/test/expand/button.e2e-legacy.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('button: expand', () => {
-  test('should not have visual regressions', async ({ page, skip }) => {
-    skip.rtl('All content takes up the full width, so RTL has no effect.');
-    await page.goto(`/src/components/button/test/expand`);
-
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`button-expand-${page.getSnapshotSettings()}.png`);
-  });
-});
diff --git a/core/src/components/button/test/expand/button.e2e.ts b/core/src/components/button/test/expand/button.e2e.ts
new file mode 100644
index 0000000000..87e24efa95
--- /dev/null
+++ b/core/src/components/button/test/expand/button.e2e.ts
@@ -0,0 +1,17 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * All content takes up the full width, so RTL has no effect.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: expand'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/button/test/expand`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`button-expand`));
+    });
+  });
+});
diff --git a/core/src/components/button/test/expand/button.e2e-legacy.ts-snapshots/button-expand-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/expand/button.e2e-legacy.ts-snapshots/button-expand-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/expand/button.e2e-legacy.ts-snapshots/button-expand-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/expand/button.e2e-legacy.ts-snapshots/button-expand-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/expand/button.e2e-legacy.ts-snapshots/button-expand-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/expand/button.e2e-legacy.ts-snapshots/button-expand-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/expand/button.e2e-legacy.ts-snapshots/button-expand-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/expand/button.e2e-legacy.ts-snapshots/button-expand-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/expand/button.e2e-legacy.ts-snapshots/button-expand-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/expand/button.e2e-legacy.ts-snapshots/button-expand-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/expand/button.e2e-legacy.ts-snapshots/button-expand-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/expand/button.e2e-legacy.ts-snapshots/button-expand-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/form-reference/button.e2e-legacy.ts b/core/src/components/button/test/form-reference/button.e2e-legacy.ts
deleted file mode 100644
index 739c9de947..0000000000
--- a/core/src/components/button/test/form-reference/button.e2e-legacy.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('button: form', () => {
-  test('should submit the form by id', async ({ page }) => {
-    await page.setContent(`
-      <form id="myForm"></form>
-      <ion-button form="myForm" type="submit">Submit</ion-button>
-    `);
-
-    const submitEvent = await page.spyOnEvent('submit');
-
-    await page.click('ion-button');
-
-    expect(submitEvent).toHaveReceivedEvent();
-  });
-
-  test('should submit the form by reference', async ({ page }) => {
-    await page.setContent(`
-      <form></form>
-      <ion-button type="submit">Submit</ion-button>
-      <script>
-        const form = document.querySelector('form');
-        const button = document.querySelector('ion-button');
-        button.form = form;
-      </script>
-    `);
-
-    const submitEvent = await page.spyOnEvent('submit');
-
-    await page.click('ion-button');
-
-    expect(submitEvent).toHaveReceivedEvent();
-  });
-
-  test('should submit the closest form', async ({ page }) => {
-    await page.setContent(`
-      <form>
-         <ion-button type="submit">Submit</ion-button>
-      </form>
-    `);
-
-    const submitEvent = await page.spyOnEvent('submit');
-
-    await page.click('ion-button');
-
-    expect(submitEvent).toHaveReceivedEvent();
-  });
-
-  test.describe('should throw a warning if the form cannot be found', () => {
-    test('form is a string selector', async ({ page }) => {
-      await page.setContent(`<ion-button type="submit" form="missingForm">Submit</ion-button>`);
-
-      const logs: string[] = [];
-
-      page.on('console', (msg) => {
-        logs.push(msg.text());
-      });
-
-      await page.click('ion-button');
-
-      expect(logs.length).toBe(1);
-      expect(logs[0]).toContain(
-        '[Ionic Warning]: Form with selector: "#missingForm" could not be found. Verify that the id is correct and the form is rendered in the DOM.'
-      );
-    });
-
-    test('form is an element reference', async ({ page }) => {
-      await page.setContent(`
-        <ion-button type="submit">Submit</ion-button>
-        <script>
-          const form = document.querySelector('form');
-          const button = document.querySelector('ion-button');
-
-          button.form = form;
-        </script>
-      `);
-
-      const logs: string[] = [];
-
-      page.on('console', (msg) => {
-        logs.push(msg.text());
-      });
-
-      await page.click('ion-button');
-
-      expect(logs.length).toBe(1);
-      expect(logs[0]).toContain(
-        '[Ionic Warning]: The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.'
-      );
-    });
-  });
-});
diff --git a/core/src/components/button/test/form-reference/button.e2e.ts b/core/src/components/button/test/form-reference/button.e2e.ts
new file mode 100644
index 0000000000..dacd22601b
--- /dev/null
+++ b/core/src/components/button/test/form-reference/button.e2e.ts
@@ -0,0 +1,107 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => {
+  test.describe(title('button: form'), () => {
+    test('should submit the form by id', async ({ page }) => {
+      await page.setContent(
+        `
+        <form id="myForm"></form>
+        <ion-button form="myForm" type="submit">Submit</ion-button>
+      `,
+        config
+      );
+
+      const submitEvent = await page.spyOnEvent('submit');
+
+      await page.click('ion-button');
+
+      expect(submitEvent).toHaveReceivedEvent();
+    });
+
+    test('should submit the form by reference', async ({ page }) => {
+      await page.setContent(
+        `
+        <form></form>
+        <ion-button type="submit">Submit</ion-button>
+        <script>
+          const form = document.querySelector('form');
+          const button = document.querySelector('ion-button');
+          button.form = form;
+        </script>
+      `,
+        config
+      );
+
+      const submitEvent = await page.spyOnEvent('submit');
+
+      await page.click('ion-button');
+
+      expect(submitEvent).toHaveReceivedEvent();
+    });
+
+    test('should submit the closest form', async ({ page }) => {
+      await page.setContent(
+        `
+        <form>
+           <ion-button type="submit">Submit</ion-button>
+        </form>
+      `,
+        config
+      );
+
+      const submitEvent = await page.spyOnEvent('submit');
+
+      await page.click('ion-button');
+
+      expect(submitEvent).toHaveReceivedEvent();
+    });
+  });
+
+  test.describe(title('should throw a warning if the form cannot be found'), () => {
+    test('form is a string selector', async ({ page }) => {
+      await page.setContent(`<ion-button type="submit" form="missingForm">Submit</ion-button>`, config);
+
+      const logs: string[] = [];
+
+      page.on('console', (msg) => {
+        logs.push(msg.text());
+      });
+
+      await page.click('ion-button');
+
+      expect(logs.length).toBe(1);
+      expect(logs[0]).toContain(
+        '[Ionic Warning]: Form with selector: "#missingForm" could not be found. Verify that the id is correct and the form is rendered in the DOM.'
+      );
+    });
+
+    test('form is an element reference', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button type="submit">Submit</ion-button>
+        <script>
+          const form = document.querySelector('form');
+          const button = document.querySelector('ion-button');
+
+          button.form = form;
+        </script>
+      `,
+        config
+      );
+
+      const logs: string[] = [];
+
+      page.on('console', (msg) => {
+        logs.push(msg.text());
+      });
+
+      await page.click('ion-button');
+
+      expect(logs.length).toBe(1);
+      expect(logs[0]).toContain(
+        '[Ionic Warning]: The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.'
+      );
+    });
+  });
+});
diff --git a/core/src/components/button/test/icon/button.e2e-legacy.ts b/core/src/components/button/test/icon/button.e2e-legacy.ts
deleted file mode 100644
index 6e4ee27473..0000000000
--- a/core/src/components/button/test/icon/button.e2e-legacy.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('button: icon', () => {
-  test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/button/test/icon`);
-
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`button-icon-${page.getSnapshotSettings()}.png`);
-  });
-});
diff --git a/core/src/components/button/test/icon/button.e2e.ts b/core/src/components/button/test/icon/button.e2e.ts
new file mode 100644
index 0000000000..6141e14d30
--- /dev/null
+++ b/core/src/components/button/test/icon/button.e2e.ts
@@ -0,0 +1,14 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: icon'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/button/test/icon`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`button-icon`));
+    });
+  });
+});
diff --git a/core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/icon/button.e2e-legacy.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/outline/button.e2e-legacy.ts b/core/src/components/button/test/outline/button.e2e-legacy.ts
deleted file mode 100644
index 56d1cb6d28..0000000000
--- a/core/src/components/button/test/outline/button.e2e-legacy.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('button: outline', () => {
-  test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/button/test/outline`);
-
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`button-outline-${page.getSnapshotSettings()}.png`);
-  });
-});
diff --git a/core/src/components/button/test/outline/button.e2e.ts b/core/src/components/button/test/outline/button.e2e.ts
new file mode 100644
index 0000000000..f296fc0ca4
--- /dev/null
+++ b/core/src/components/button/test/outline/button.e2e.ts
@@ -0,0 +1,14 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: outline'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/button/test/outline`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`button-outline`));
+    });
+  });
+});
diff --git a/core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/outline/button.e2e-legacy.ts-snapshots/button-outline-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/round/button.e2e-legacy.ts b/core/src/components/button/test/round/button.e2e-legacy.ts
deleted file mode 100644
index a035165661..0000000000
--- a/core/src/components/button/test/round/button.e2e-legacy.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('button: round', () => {
-  test('should not have visual regressions', async ({ page, skip }) => {
-    skip.rtl('All content takes up the full width, so RTL has no effect.');
-    await page.goto(`/src/components/button/test/round`);
-
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`button-round-${page.getSnapshotSettings()}.png`);
-  });
-});
diff --git a/core/src/components/button/test/round/button.e2e.ts b/core/src/components/button/test/round/button.e2e.ts
new file mode 100644
index 0000000000..fd9eedabdb
--- /dev/null
+++ b/core/src/components/button/test/round/button.e2e.ts
@@ -0,0 +1,17 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * All content takes up the full width, so RTL has no effect.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: round'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/button/test/round`, config);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`button-round`));
+    });
+  });
+});
diff --git a/core/src/components/button/test/round/button.e2e-legacy.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e-legacy.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/round/button.e2e-legacy.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e-legacy.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/round/button.e2e-legacy.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e-legacy.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/round/button.e2e-legacy.ts-snapshots/button-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e-legacy.ts-snapshots/button-round-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/round/button.e2e-legacy.ts-snapshots/button-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e-legacy.ts-snapshots/button-round-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/round/button.e2e-legacy.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e-legacy.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts b/core/src/components/button/test/size/button.e2e-legacy.ts
deleted file mode 100644
index f236645703..0000000000
--- a/core/src/components/button/test/size/button.e2e-legacy.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('button: size', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-  });
-  test('should render small buttons', async ({ page }) => {
-    await page.setContent(`
-      <ion-button size="small" fill="solid">Small Button</ion-button>
-    `);
-
-    const wrapper = page.locator('ion-button');
-
-    await expect(wrapper).toHaveScreenshot(`button-size-small-${page.getSnapshotSettings()}.png`);
-  });
-  test('should render large buttons', async ({ page }) => {
-    await page.setContent(`
-      <ion-button size="large" fill="solid">Large Button</ion-button>
-    `);
-
-    const wrapper = page.locator('ion-button');
-
-    await expect(wrapper).toHaveScreenshot(`button-size-large-${page.getSnapshotSettings()}.png`);
-  });
-  test.describe('in ion-buttons', () => {
-    test('should render small button', async ({ page }) => {
-      await page.setContent(`
-        <ion-buttons>
-          <ion-button size="small" fill="solid">Small Button</ion-button>
-        </ion-buttons>
-      `);
-
-      const wrapper = page.locator('ion-button');
-
-      await expect(wrapper).toHaveScreenshot(`button-size-small-in-buttons-${page.getSnapshotSettings()}.png`);
-    });
-    test('should render large button', async ({ page }) => {
-      await page.setContent(`
-        <ion-buttons>
-          <ion-button size="large" fill="solid">Large Button</ion-button>
-        </ion-buttons>
-      `);
-
-      const wrapper = page.locator('ion-button');
-
-      await expect(wrapper).toHaveScreenshot(`button-size-large-in-buttons-${page.getSnapshotSettings()}.png`);
-    });
-  });
-});
diff --git a/core/src/components/button/test/size/button.e2e.ts b/core/src/components/button/test/size/button.e2e.ts
new file mode 100644
index 0000000000..494ce6b6cc
--- /dev/null
+++ b/core/src/components/button/test/size/button.e2e.ts
@@ -0,0 +1,62 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: size'), () => {
+    test('should render small buttons', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button size="small" fill="solid">Small Button</ion-button>
+      `,
+        config
+      );
+
+      const wrapper = page.locator('ion-button');
+
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-size-small`));
+    });
+    test('should render large buttons', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-button size="large" fill="solid">Large Button</ion-button>
+      `,
+        config
+      );
+
+      const wrapper = page.locator('ion-button');
+
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-size-large`));
+    });
+  });
+
+  test.describe(title('in ion-buttons'), () => {
+    test('should render small button', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-buttons>
+        <ion-button size="small" fill="solid">Small Button</ion-button>
+      </ion-buttons>
+    `,
+        config
+      );
+
+      const wrapper = page.locator('ion-button');
+
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-size-small-in-buttons`));
+    });
+    test('should render large button', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-buttons>
+        <ion-button size="large" fill="solid">Large Button</ion-button>
+      </ion-buttons>
+    `,
+        config
+      );
+
+      const wrapper = page.locator('ion-button');
+
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-size-large-in-buttons`));
+    });
+  });
+});
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-large-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/size/button.e2e-legacy.ts-snapshots/button-size-small-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts b/core/src/components/button/test/strong/button.e2e-legacy.ts
deleted file mode 100644
index 0287ba46be..0000000000
--- a/core/src/components/button/test/strong/button.e2e-legacy.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-/**
- * Clear buttons have special font-weight
- * styles which is why we make sure
- * to capture the clear button here.
- */
-test.describe('button: strong', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-  });
-  test('should render strong button', async ({ page }) => {
-    await page.setContent(`
-      <ion-button fill="solid" strong="true">Button</ion-button>
-    `);
-
-    const wrapper = page.locator('ion-button');
-
-    await expect(wrapper).toHaveScreenshot(`button-strong-${page.getSnapshotSettings()}.png`);
-  });
-  test('should render strong clear button', async ({ page }) => {
-    await page.setContent(`
-      <ion-button fill="clear" strong="true">Button</ion-button>
-    `);
-
-    const wrapper = page.locator('ion-button');
-
-    await expect(wrapper).toHaveScreenshot(`button-clear-strong-${page.getSnapshotSettings()}.png`);
-  });
-  test.describe('in ion-buttons', () => {
-    test('should render strong button', async ({ page }) => {
-      await page.setContent(`
-        <ion-buttons>
-          <ion-button strong="true" fill="solid">Button</ion-button>
-        </ion-buttons>
-      `);
-
-      const wrapper = page.locator('ion-button');
-
-      await expect(wrapper).toHaveScreenshot(`button-strong-in-buttons-${page.getSnapshotSettings()}.png`);
-    });
-    test('should render strong clear button', async ({ page }) => {
-      await page.setContent(`
-        <ion-buttons>
-          <ion-button strong="true" fill="clear">Button</ion-button>
-        </ion-buttons>
-      `);
-
-      const wrapper = page.locator('ion-button');
-
-      await expect(wrapper).toHaveScreenshot(`button-clear-strong-in-buttons-${page.getSnapshotSettings()}.png`);
-    });
-  });
-});
diff --git a/core/src/components/button/test/strong/button.e2e.ts b/core/src/components/button/test/strong/button.e2e.ts
new file mode 100644
index 0000000000..5fc2a23c90
--- /dev/null
+++ b/core/src/components/button/test/strong/button.e2e.ts
@@ -0,0 +1,66 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Clear buttons have special font-weight
+ * styles which is why we make sure
+ * to capture the clear button here.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: strong'), () => {
+    test('should render strong button', async ({ page }) => {
+      await page.setContent(
+        `
+         <ion-button fill="solid" strong="true">Button</ion-button>
+       `,
+        config
+      );
+
+      const wrapper = page.locator('ion-button');
+
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-strong`));
+    });
+    test('should render strong clear button', async ({ page }) => {
+      await page.setContent(
+        `
+         <ion-button fill="clear" strong="true">Button</ion-button>
+       `,
+        config
+      );
+
+      const wrapper = page.locator('ion-button');
+
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-clear-strong`));
+    });
+  });
+  test.describe(title('in ion-buttons'), () => {
+    test('should render strong button', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-buttons>
+            <ion-button strong="true" fill="solid">Button</ion-button>
+          </ion-buttons>
+        `,
+        config
+      );
+
+      const wrapper = page.locator('ion-button');
+
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-strong-in-buttons`));
+    });
+    test('should render strong clear button', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-buttons>
+            <ion-button strong="true" fill="clear">Button</ion-button>
+          </ion-buttons>
+        `,
+        config
+      );
+
+      const wrapper = page.locator('ion-button');
+
+      await expect(wrapper).toHaveScreenshot(screenshot(`button-clear-strong-in-buttons`));
+    });
+  });
+});
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-in-buttons-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-clear-strong-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-clear-strong-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-in-buttons-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/strong/button.e2e-legacy.ts-snapshots/button-strong-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Safari-linux.png