diff --git a/core/src/components/button/test/clear/button.e2e.ts b/core/src/components/button/test/clear/button.e2e.ts
index 92190aec088..6777705ffd5 100644
--- a/core/src/components/button/test/clear/button.e2e.ts
+++ b/core/src/components/button/test/clear/button.e2e.ts
@@ -1,14 +1,17 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
-configs().forEach(({ title, config, screenshot }) => {
- test.describe(title('button: clear'), () => {
+/**
+ * Fill="clear" does not render differently based on the direction.
+ */
+configs({ directions: ['ltr'], themes: ['ios', 'md', 'ionic'] }).forEach(({ title, config, screenshot }) => {
+ test.describe(title('button: fill: 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`));
+ await expect(page).toHaveScreenshot(screenshot(`button-fill-clear`));
});
});
});
diff --git a/core/src/components/button/test/clear/button.e2e.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
deleted file mode 100644
index bbdf5664f8c..00000000000
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/clear/button.e2e.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
deleted file mode 100644
index 649c80cbee1..00000000000
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/clear/button.e2e.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
deleted file mode 100644
index 32edd81d6d4..00000000000
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/clear/button.e2e.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
deleted file mode 100644
index 1e0e968829a..00000000000
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/clear/button.e2e.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
deleted file mode 100644
index 57a09d7aadb..00000000000
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/clear/button.e2e.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
deleted file mode 100644
index 9cdd91a7e1f..00000000000
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/clear/button.e2e.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
deleted file mode 100644
index bd20962d526..00000000000
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/clear/button.e2e.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
deleted file mode 100644
index fdc28fec86b..00000000000
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/clear/button.e2e.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
deleted file mode 100644
index 0f4b5f3d61f..00000000000
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..76b9ffcaa75
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e4fca3bf782
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f27899245fb
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..10f8baf07d9
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..713f3365029
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b7fc7dba3b4
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..48ba51678e4
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Firefox-linux.png
similarity index 63%
rename from core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Firefox-linux.png
index 4fd2a0a8f56..cdaceec423f 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..491cfe187f2
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..96231843d30
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Safari-linux.png
similarity index 52%
rename from core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Safari-linux.png
index 991f6585e1a..c13bdeb5e4e 100644
Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/icon/button.e2e.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
index 99343bf67bb..dd26d65fe1c 100644
Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/icon/button.e2e.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
index eaab63f282a..e7f22e04389 100644
Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/icon/button.e2e.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
index 85dd907f2fc..bf813157a5b 100644
Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/icon/button.e2e.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
index ed51e623bc3..9369a357c5d 100644
Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/icon/button.e2e.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
index 477ae42f928..3c99de6532a 100644
Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/icon/button.e2e.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
index bb58587c5f5..996da9e106c 100644
Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/round/button.e2e.ts b/core/src/components/button/test/round/button.e2e.ts
deleted file mode 100644
index b61a6307367..00000000000
--- a/core/src/components/button/test/round/button.e2e.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-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.describe('default', () => {
- test('should not have visual regressions', async ({ page }) => {
- await page.goto(`/src/components/button/test/round`, config);
-
- await page.setIonViewport();
-
- const container = page.locator('#default');
-
- await expect(container).toHaveScreenshot(screenshot(`button-round`));
- });
- });
-
- test.describe('outline', () => {
- test('should not have visual regressions', async ({ page }) => {
- await page.goto(`/src/components/button/test/round`, config);
-
- await page.setIonViewport();
-
- const container = page.locator('#outline');
-
- await expect(container).toHaveScreenshot(screenshot(`button-outline-round`));
- });
- });
-
- test.describe('clear', () => {
- test('should not have visual regressions', async ({ page }) => {
- await page.goto(`/src/components/button/test/round`, config);
-
- await page.setIonViewport();
-
- const container = page.locator('#clear');
-
- await expect(container).toHaveScreenshot(screenshot(`button-clear-round`));
- });
- });
-
- test.describe('color', () => {
- test('should not have visual regressions', async ({ page }) => {
- await page.goto(`/src/components/button/test/round`, config);
-
- await page.setIonViewport();
-
- const container = page.locator('#color');
-
- await expect(container).toHaveScreenshot(screenshot(`button-color-round`));
- });
- });
-
- test.describe('expand', () => {
- test('should not have visual regressions', async ({ page }) => {
- await page.goto(`/src/components/button/test/round`, config);
-
- await page.setIonViewport();
-
- const container = page.locator('#expand');
-
- await expect(container).toHaveScreenshot(screenshot(`button-expand-round`));
- });
- });
- });
-});
diff --git a/core/src/components/button/test/round/button.e2e.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
deleted file mode 100644
index dd97f87f422..00000000000
Binary files a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/round/button.e2e.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
deleted file mode 100644
index ca027b9d824..00000000000
Binary files a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Firefox-linux.png and /dev/null differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts b/core/src/components/button/test/shape/button.e2e.ts
new file mode 100644
index 00000000000..058c1a0786e
--- /dev/null
+++ b/core/src/components/button/test/shape/button.e2e.ts
@@ -0,0 +1,110 @@
+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: shape'), () => {
+ test.describe('round', () => {
+ test.describe('default', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.goto(`/src/components/button/test/shape`, config);
+
+ await page.setIonViewport();
+
+ const container = page.locator('#default');
+
+ await expect(container).toHaveScreenshot(screenshot(`button-round`));
+ });
+ });
+
+ test.describe('outline', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.goto(`/src/components/button/test/shape`, config);
+
+ await page.setIonViewport();
+
+ const container = page.locator('#outline');
+
+ await expect(container).toHaveScreenshot(screenshot(`button-outline-round`));
+ });
+ });
+
+ test.describe('clear', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.goto(`/src/components/button/test/shape`, config);
+
+ await page.setIonViewport();
+
+ const container = page.locator('#clear');
+
+ await expect(container).toHaveScreenshot(screenshot(`button-clear-round`));
+ });
+ });
+
+ test.describe('color', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.goto(`/src/components/button/test/shape`, config);
+
+ await page.setIonViewport();
+
+ const container = page.locator('#color');
+
+ await expect(container).toHaveScreenshot(screenshot(`button-color-round`));
+ });
+ });
+
+ test.describe('expand', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.goto(`/src/components/button/test/shape`, config);
+
+ await page.setIonViewport();
+
+ const container = page.locator('#expand');
+
+ await expect(container).toHaveScreenshot(screenshot(`button-expand-round`));
+ });
+ });
+ });
+ });
+});
+
+/**
+ * Shape="rectangular" is only available in the Ionic theme.
+ */
+configs({ directions: ['ltr'], themes: ['ionic'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('button: shape'), () => {
+ test.describe('rectangular', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Rectangular Button, Solid
+ Rectangular Button, Solid, Focused
+ Rectangular Button, Solid, Activated
+
+ Rectangular Button, Outline
+ Rectangular Button, Outline, Focused
+ Rectangular Button, Outline, Activated
+
+ Rectangular Button
+ Rectangular Button, Focused
+ Rectangular Button, Activated
+
+ `,
+ config
+ );
+
+ const container = page.locator('#container');
+
+ await expect(container).toHaveScreenshot(screenshot(`button-shape-rectangular`));
+ });
+ });
+ });
+});
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-clear-round-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-color-round-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-expand-round-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/button/test/round/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-outline-round-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/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.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/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.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/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.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..70b3d5002a2
Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8b4fe4c625f
Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/shape/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.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/button/test/shape/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3ad4abe48cc
Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e94cabed7ae
Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fb28bb9386e
Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-ios-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..34707f7f9d6
Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..54b8e031537
Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3310aec4f91
Binary files /dev/null and b/core/src/components/button/test/shape/button.e2e.ts-snapshots/button-shape-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/round/index.html b/core/src/components/button/test/shape/index.html
similarity index 100%
rename from core/src/components/button/test/round/index.html
rename to core/src/components/button/test/shape/index.html
diff --git a/core/src/components/button/test/size/button.e2e.ts b/core/src/components/button/test/size/button.e2e.ts
index 494ce6b6cc3..dc4d9cf85f9 100644
--- a/core/src/components/button/test/size/button.e2e.ts
+++ b/core/src/components/button/test/size/button.e2e.ts
@@ -1,7 +1,7 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], themes: ['ionic', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('button: size'), () => {
test('should render small buttons', async ({ page }) => {
await page.setContent(
@@ -60,3 +60,26 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
});
});
});
+
+/**
+ * The following tests are specific to the Ionic theme and do not depend on the text direction.
+ */
+configs({ directions: ['ltr'], themes: ['ionic'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('button: size'), () => {
+ test('should render xsmall buttons', async ({ page }) => {
+ await page.setContent(`X-Small Button`, config);
+
+ const wrapper = page.locator('ion-button');
+
+ await expect(wrapper).toHaveScreenshot(screenshot(`button-size-x-small`));
+ });
+
+ test('should render xlarge buttons', async ({ page }) => {
+ await page.setContent(`X-Large Button`, config);
+
+ const wrapper = page.locator('ion-button');
+
+ await expect(wrapper).toHaveScreenshot(screenshot(`button-size-x-large`));
+ });
+ });
+});
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-ios-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c561891dce0
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-ios-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..18efb704a3a
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-ios-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c028428c91d
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-ios-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..903e20d6ea9
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8e56caa5e64
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3a2b8e7e38a
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-ios-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9f157f26a57
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-ios-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..dad39f6c54f
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-ios-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9ed6a0b4bb4
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-ios-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ba8fc5cd365
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..fa8e0c76d15
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d8163cbcdaa
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-ios-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b5d99548c3f
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-ios-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..825fcea6ab4
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-ios-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3682afe9452
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-ios-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..affda59304c
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..915ddb84fc5
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..0fc678d7a87
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-in-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-ios-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..dca53abed78
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-ios-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..94e3d471e4d
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-ios-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fb0dca65ba8
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-ios-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..067e80a0e0f
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..38739936f35
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4046222c9a3
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-ios-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f136069a9ab
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-ios-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ab9777cff44
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-ios-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ac4d05deb4d
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-ios-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f6e002a2d75
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b4c096fd517
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..de81c33f458
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-ios-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2d706e8f18f
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-ios-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..20d99ecb195
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-ios-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..96878b603b3
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-ios-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..83450a87ba6
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..663af86dc25
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3b3066f1c2b
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-x-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/theme-ionic/button.e2e.ts b/core/src/components/button/test/theme-ionic/button.e2e.ts
deleted file mode 100644
index 565a1bbb49c..00000000000
--- a/core/src/components/button/test/theme-ionic/button.e2e.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { expect } from '@playwright/test';
-import type { E2EPage } from '@utils/test/playwright';
-import { configs, test } from '@utils/test/playwright';
-
-class ButtonFixture {
- readonly page: E2EPage;
- readonly screenshotFn?: (file: string) => string;
-
- constructor(page: E2EPage, screenshot?: (file: string) => string) {
- this.page = page;
- this.screenshotFn = screenshot;
- }
-
- async selectOption(select: string, optIndex: number) {
- const selectElem = this.page.locator(`ion-select#select-${select}`);
- await selectElem.click();
-
- const selectOptElem = this.page.locator(`ion-alert .alert-radio-group button:nth-child(${optIndex + 1})`);
- await selectOptElem.click();
-
- const selectOkBtn = this.page.locator(`ion-alert .alert-button-group button:nth-child(2)`);
- await selectOkBtn.click();
- }
-
- async checkScreenshot(modifier: string) {
- const { screenshotFn } = this;
-
- if (!screenshotFn) {
- throw new Error(
- 'A screenshot function is required to take a screenshot. Pass one in when creating ButtonFixture.'
- );
- }
-
- const wrapper = this.page.locator('#screenshot-wrapper');
-
- await expect(wrapper).toHaveScreenshot(screenshotFn(`${modifier}-button`));
- }
-}
-
-configs({ themes: ['ionic'], modes: ['md'] }).forEach(({ config, screenshot, title }) => {
- test.describe(title('button: theme ionic'), () => {
- let buttonFixture!: ButtonFixture;
-
- test.beforeEach(async ({ page }) => {
- await page.goto(`/src/components/button/test/theme-ionic`, config);
- await page.setIonViewport();
- buttonFixture = new ButtonFixture(page, screenshot);
- });
-
- test('default', async () => {
- await buttonFixture.checkScreenshot(`default`);
- });
-
- test('check sizes', async () => {
- await buttonFixture.selectOption('size', 1);
- await buttonFixture.checkScreenshot(`xsmall`);
-
- await buttonFixture.selectOption('size', 2);
- await buttonFixture.checkScreenshot(`small`);
-
- await buttonFixture.selectOption('size', 3);
- await buttonFixture.checkScreenshot(`large`);
-
- await buttonFixture.selectOption('size', 4);
- await buttonFixture.checkScreenshot(`xlarge`);
- });
-
- test('check shapes', async () => {
- await buttonFixture.selectOption('shape', 1);
- await buttonFixture.checkScreenshot(`rectangular`);
-
- await buttonFixture.selectOption('shape', 2);
- await buttonFixture.checkScreenshot(`round`);
- });
-
- test('check fills', async () => {
- await buttonFixture.selectOption('fill', 1);
- await buttonFixture.checkScreenshot(`outline`);
-
- await buttonFixture.selectOption('fill', 2);
- await buttonFixture.checkScreenshot(`clear`);
- });
- });
-});