diff --git a/core/src/components/button/test/anchor/e2e.ts b/core/src/components/button/test/anchor/e2e.ts
deleted file mode 100644
index dc28bc57bc..0000000000
--- a/core/src/components/button/test/anchor/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: anchor', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/anchor?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/button/test/basic/button.e2e.ts b/core/src/components/button/test/basic/button.e2e.ts
index 6e54bc8ad0..50a7270497 100644
--- a/core/src/components/button/test/basic/button.e2e.ts
+++ b/core/src/components/button/test/basic/button.e2e.ts
@@ -7,7 +7,7 @@ test.describe('button: basic', () => {
 
     await page.setIonViewport();
 
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(`button-diff-${page.getSnapshotSettings()}.png`);
+    expect(await page.screenshot()).toMatchSnapshot(`button-diff-${page.getSnapshotSettings()}.png`);
   });
 });
 
diff --git a/core/src/components/button/test/basic/e2e.ts b/core/src/components/button/test/basic/e2e.ts
deleted file mode 100644
index a2f6441a74..0000000000
--- a/core/src/components/button/test/basic/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/button/test/basic/index.html b/core/src/components/button/test/basic/index.html
index c8b44f5b63..19efe474ce 100644
--- a/core/src/components/button/test/basic/index.html
+++ b/core/src/components/button/test/basic/index.html
@@ -88,9 +88,7 @@
         </p>
 
         <p>
-          <ion-button expand="block" id="disabledButton" disabled onclick="clickedButton(event)"
-            >Button Disabled</ion-button
-          >
+          <ion-button expand="block" id="disabledButton" disabled>Button Disabled</ion-button>
           <ion-button expand="block" color="secondary" disabled>Secondary Disabled</ion-button>
           <ion-button expand="block" color="tertiary" style="--opacity: 1" disabled>Disabled opacity: 1</ion-button>
         </p>
@@ -125,13 +123,8 @@
 
       function toggleDisabled() {
         var buttonEl = document.getElementById('disabledButton');
-        console.log(buttonEl);
         buttonEl.disabled = !buttonEl.disabled;
       }
-
-      function clickedButton(ev) {
-        console.log('Clicked button', ev);
-      }
     </script>
   </body>
 </html>
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..1291638011
--- /dev/null
+++ b/core/src/components/button/test/clear/button.e2e.ts
@@ -0,0 +1,12 @@
+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();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-clear-${page.getSnapshotSettings()}.png`);
+  });
+});
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
new file mode 100644
index 0000000000..6a507b2309
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-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-clear-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3fd48cb04b
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-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-clear-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ebc59a3d05
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-ltr-Mobile-Safari-linux.png 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
new file mode 100644
index 0000000000..fbd136ea86
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Chrome-linux.png 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
new file mode 100644
index 0000000000..327deea993
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Firefox-linux.png 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
new file mode 100644
index 0000000000..2eaaf7343e
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-ios-rtl-Mobile-Safari-linux.png 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
new file mode 100644
index 0000000000..5422eb4987
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Chrome-linux.png 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
new file mode 100644
index 0000000000..3c57c597b2
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-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-clear-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1d0afbdf79
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-ltr-Mobile-Safari-linux.png 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
new file mode 100644
index 0000000000..3df5daabfe
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Chrome-linux.png 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
new file mode 100644
index 0000000000..c8dbde64af
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Firefox-linux.png 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
new file mode 100644
index 0000000000..43455abe19
Binary files /dev/null and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-clear-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/clear/e2e.ts b/core/src/components/button/test/clear/e2e.ts
deleted file mode 100644
index 7c62afab62..0000000000
--- a/core/src/components/button/test/clear/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: clear', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/clear?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/button/test/dynamic/e2e.ts b/core/src/components/button/test/dynamic/e2e.ts
deleted file mode 100644
index d1ef5466f3..0000000000
--- a/core/src/components/button/test/dynamic/e2e.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: dynamic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/dynamic?ionic:_testing=true',
-  });
-
-  const compares = [];
-
-  compares.push(await page.compareScreenshot());
-
-  await page.click('#add-item-button');
-
-  compares.push(await page.compareScreenshot('add item button'));
-
-  await page.click('#add-item-divider-button');
-
-  compares.push(await page.compareScreenshot('add item divider button'));
-
-  await page.click('#change-item-button');
-
-  compares.push(await page.compareScreenshot('change item button size'));
-
-  await page.click('#change-item-divider-button');
-
-  compares.push(await page.compareScreenshot('change item divider button size'));
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/button/test/dynamic/index.html b/core/src/components/button/test/dynamic/index.html
deleted file mode 100644
index 5ffba1f7be..0000000000
--- a/core/src/components/button/test/dynamic/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Button - Dynamic</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Button - Dynamic</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content class="ion-padding" id="content" no-bounce>
-        <ion-item id="dynamicItem">
-          <ion-button slot="start">Default</ion-button>
-          <ion-label>Dynamic Button</ion-label>
-          <ion-button id="dynamicItemLarge" slot="end" size="large">Large</ion-button>
-        </ion-item>
-        <ion-button id="add-item-button" color="success" onClick="addButton('dynamicItem')"> Add a Button </ion-button>
-        <ion-button id="change-item-button" color="tertiary" onClick="changeButtonSize('dynamicItemLarge')">
-          Change Button Size
-        </ion-button>
-
-        <ion-item-divider id="dynamicItemDivider">
-          <ion-button slot="start">Default</ion-button>
-          <ion-label>Dynamic Button</ion-label>
-          <ion-button id="dynamicItemDividerLarge" slot="end" size="large">Large</ion-button>
-        </ion-item-divider>
-        <ion-button id="add-item-divider-button" color="success" onClick="addButton('dynamicItemDivider')">
-          Add a Button
-        </ion-button>
-        <ion-button
-          id="change-item-divider-button"
-          color="tertiary"
-          onClick="changeButtonSize('dynamicItemDividerLarge')"
-        >
-          Change Button Size
-        </ion-button>
-      </ion-content>
-    </ion-app>
-
-    <script>
-      function addButton(dynamicId) {
-        var item = document.querySelector('#' + dynamicId);
-        var button = document.createElement('ion-button');
-        button.textContent = 'Button';
-        button.slot = 'start';
-        item.appendChild(button);
-      }
-
-      function changeButtonSize(dynamicId) {
-        var button = document.querySelector('#' + dynamicId);
-        var size = button.size === 'large' ? undefined : 'large';
-        button.size = size;
-      }
-    </script>
-  </body>
-</html>
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..200d54b476
--- /dev/null
+++ b/core/src/components/button/test/expand/button.e2e.ts
@@ -0,0 +1,13 @@
+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();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-expand-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/button/test/expand/button.e2e.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
new file mode 100644
index 0000000000..a2c270b6ae
Binary files /dev/null and b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/expand/button.e2e.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
new file mode 100644
index 0000000000..db70580ae7
Binary files /dev/null and b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/expand/button.e2e.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
new file mode 100644
index 0000000000..59d0ed6d62
Binary files /dev/null and b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/expand/button.e2e.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
new file mode 100644
index 0000000000..d6f5058859
Binary files /dev/null and b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/expand/button.e2e.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
new file mode 100644
index 0000000000..e9de6fe28f
Binary files /dev/null and b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/expand/button.e2e.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
new file mode 100644
index 0000000000..0c7827081f
Binary files /dev/null and b/core/src/components/button/test/expand/button.e2e.ts-snapshots/button-expand-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/expand/e2e.ts b/core/src/components/button/test/expand/e2e.ts
deleted file mode 100644
index 83ce79d2c9..0000000000
--- a/core/src/components/button/test/expand/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: expand', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/expand?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
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..7b96ea5a1f
--- /dev/null
+++ b/core/src/components/button/test/icon/button.e2e.ts
@@ -0,0 +1,12 @@
+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();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-icon-${page.getSnapshotSettings()}.png`);
+  });
+});
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
new file mode 100644
index 0000000000..baa96bdd7b
Binary files /dev/null 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-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2825f66d61
Binary files /dev/null and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/icon/button.e2e.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
new file mode 100644
index 0000000000..6bdbe866a5
Binary files /dev/null and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..fe9cf9a822
Binary files /dev/null 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-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
new file mode 100644
index 0000000000..2568fc2d74
Binary files /dev/null and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/icon/button.e2e.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
new file mode 100644
index 0000000000..28e8037e93
Binary files /dev/null and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-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
new file mode 100644
index 0000000000..1b0e5a63f6
Binary files /dev/null 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
new file mode 100644
index 0000000000..583f07d86e
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..91f24fa538
Binary files /dev/null and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..421d2a973f
Binary files /dev/null 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
new file mode 100644
index 0000000000..050f66c7da
Binary files /dev/null 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/icon/button.e2e.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
new file mode 100644
index 0000000000..4cb4dd69f0
Binary files /dev/null and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/icon/e2e.ts b/core/src/components/button/test/icon/e2e.ts
deleted file mode 100644
index 49e278da9f..0000000000
--- a/core/src/components/button/test/icon/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: icon', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/icon?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
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..5cfe471d10
--- /dev/null
+++ b/core/src/components/button/test/outline/button.e2e.ts
@@ -0,0 +1,12 @@
+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();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-outline-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/button/test/outline/button.e2e.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
new file mode 100644
index 0000000000..2a2d26142e
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.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
new file mode 100644
index 0000000000..72ef0a5cbc
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.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
new file mode 100644
index 0000000000..f4cfaaaf8c
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.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
new file mode 100644
index 0000000000..ee55a94249
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.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
new file mode 100644
index 0000000000..10c6db5d7c
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.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
new file mode 100644
index 0000000000..ff77a8d15b
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.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
new file mode 100644
index 0000000000..2bfaa01d13
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.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
new file mode 100644
index 0000000000..88a236341b
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.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
new file mode 100644
index 0000000000..e78d0bbc2e
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.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
new file mode 100644
index 0000000000..9677cd746b
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.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
new file mode 100644
index 0000000000..b1fac9ee96
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/outline/button.e2e.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
new file mode 100644
index 0000000000..42e2695dcd
Binary files /dev/null and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/outline/e2e.ts b/core/src/components/button/test/outline/e2e.ts
deleted file mode 100644
index 985b7b7e8f..0000000000
--- a/core/src/components/button/test/outline/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: outline', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/outline?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
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..a3fb17df58
--- /dev/null
+++ b/core/src/components/button/test/round/button.e2e.ts
@@ -0,0 +1,13 @@
+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();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-round-${page.getSnapshotSettings()}.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/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..11301e4b88
Binary files /dev/null and b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Chrome-linux.png differ
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/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c65a2ce6a3
Binary files /dev/null and b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Firefox-linux.png differ
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/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..df09448643
Binary files /dev/null and b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-ios-ltr-Mobile-Safari-linux.png differ
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
new file mode 100644
index 0000000000..a3b854f6a1
Binary files /dev/null and b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Chrome-linux.png 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
new file mode 100644
index 0000000000..4a40854a39
Binary files /dev/null and b/core/src/components/button/test/round/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/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ffce4fc8ec
Binary files /dev/null and b/core/src/components/button/test/round/button.e2e.ts-snapshots/button-round-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/round/e2e.ts b/core/src/components/button/test/round/e2e.ts
deleted file mode 100644
index b8d41d0c57..0000000000
--- a/core/src/components/button/test/round/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: round', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/round?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
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..8ed140a90a
--- /dev/null
+++ b/core/src/components/button/test/size/button.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('button: size', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/button/test/size`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-size-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..927052c3f9
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f24513e195
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f2acc61957
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7050895519
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3f3d793fdc
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..be230efc25
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..63ce444f64
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..84de97e109
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4f2dd864df
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e6fa5f31cd
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3687927d71
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b249c25f06
Binary files /dev/null and b/core/src/components/button/test/size/button.e2e.ts-snapshots/button-size-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/size/e2e.ts b/core/src/components/button/test/size/e2e.ts
deleted file mode 100644
index c8ba343662..0000000000
--- a/core/src/components/button/test/size/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: size', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/size?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/button/test/standalone/e2e.ts b/core/src/components/button/test/standalone/e2e.ts
deleted file mode 100644
index 1210a24996..0000000000
--- a/core/src/components/button/test/standalone/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/button/test/standalone/index.html b/core/src/components/button/test/standalone/index.html
deleted file mode 100644
index e9ce449807..0000000000
--- a/core/src/components/button/test/standalone/index.html
+++ /dev/null
@@ -1,123 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Button - Standalone</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/core.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <h3>Default</h3>
-    <p>
-      <ion-button>Default</ion-button>
-      <ion-button><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
-      <ion-button><ion-icon slot="start" name="pin"></ion-icon>Map</ion-button>
-      <ion-button shape="round">Round</ion-button>
-      <ion-button fill="outline">Outline</ion-button>
-      <ion-button fill="clear">Clear</ion-button>
-      <ion-button fill="outline" expand="full"
-        >Full Outline Full Outline Full Outline Full Outline Full Outline Full Outline Full Outline</ion-button
-      >
-      <ion-button fill="clear" expand="block">Block Clear</ion-button>
-    </p>
-
-    <h3>Round button combinations</h3>
-    <p>
-      <ion-button shape="round" size="small">Round & Small</ion-button>
-      <ion-button shape="round" size="large">Round & Large</ion-button>
-      <ion-button shape="round" fill="outline">Round & Outline</ion-button>
-    </p>
-
-    <h3>Colors</h3>
-    <p>
-      <ion-button color="primary">Primary</ion-button>
-      <ion-button color="secondary">Secondary</ion-button>
-      <ion-button color="tertiary">Tertiary</ion-button>
-      <ion-button fill="outline" color="success">Success Outline</ion-button>
-      <ion-button fill="clear" color="warning">Warning Clear</ion-button>
-      <ion-button color="danger">Danger</ion-button>
-      <ion-button color="light">Light</ion-button>
-      <ion-button expand="block" fill="outline" color="medium">Medium Outline</ion-button>
-      <ion-button expand="full" fill="clear" color="dark">Dark Clear</ion-button>
-    </p>
-
-    <h3>Custom</h3>
-
-    <!-- Custom Font -->
-    <ion-button class="wide">wide</ion-button>
-    <ion-button class="large">large</ion-button>
-    <ion-button class="round">rounded</ion-button>
-    <ion-button aria-label="this is my custom label">custom aria-label</ion-button>
-
-    <!-- Custom Colors -->
-    <ion-button class="custom">custom</ion-button>
-    <ion-button class="custom ion-activated ion-focused">custom.focused</ion-button>
-    <ion-button class="custom ion-activated">custom.activated</ion-button>
-    <ion-button color="secondary" class="custom">custom w/ secondary</ion-button>
-    <ion-button fill="clear" class="medium">custom medium</ion-button>
-
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-button>Default</ion-button>
-      </ion-buttons>
-      <ion-title>Bar</ion-title>
-      <ion-buttons slot="end">
-        <ion-button color="secondary">Secondary</ion-button>
-      </ion-buttons>
-    </ion-toolbar>
-
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-button class="custom">Custom</ion-button>
-        <ion-button class="custom ion-activated">Custom.a</ion-button>
-      </ion-buttons>
-      <ion-title>Bar</ion-title>
-      <ion-buttons slot="end">
-        <ion-button color="secondary" class="custom">Custom Secondary</ion-button>
-      </ion-buttons>
-    </ion-toolbar>
-
-    <style>
-      .wide {
-        width: 100px;
-      }
-
-      .large {
-        font-weight: normal;
-        font-size: 24px;
-      }
-
-      .round {
-        width: 60px;
-        height: 60px;
-        --border-radius: 50%;
-        --vertical-align: middle;
-
-        --padding-start: 10px;
-        --padding-end: 10px;
-      }
-
-      .custom {
-        --background: lightpink;
-        --background-hover: #ffb6c1;
-        --background-activated: green;
-        --color: #222;
-        --color-activated: white;
-        --opacity: 1;
-      }
-
-      .medium {
-        --color: #989aa2;
-        --background-hover: #989aa2;
-      }
-    </style>
-  </body>
-</html>
diff --git a/core/src/components/button/test/states/e2e.ts b/core/src/components/button/test/states/e2e.ts
deleted file mode 100644
index 361a3b2ef5..0000000000
--- a/core/src/components/button/test/states/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: states', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/states?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/button/test/states/index.html b/core/src/components/button/test/states/index.html
deleted file mode 100644
index 6124cdc1eb..0000000000
--- a/core/src/components/button/test/states/index.html
+++ /dev/null
@@ -1,160 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Button - States</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/core.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-content>
-        <h3>Default</h3>
-        <p>
-          <ion-button>Default</ion-button>
-          <ion-button><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
-          <ion-button shape="round">Round</ion-button>
-          <ion-button fill="outline">Outline</ion-button>
-          <ion-button fill="clear">Clear</ion-button>
-          <ion-button color="secondary">Default</ion-button>
-          <ion-button color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
-          <ion-button color="danger" shape="round" fill="outline">Round</ion-button>
-          <ion-button color="warning" fill="outline">Outline</ion-button>
-          <ion-button color="dark" fill="clear">Clear</ion-button>
-        </p>
-
-        <h3>Focused</h3>
-        <p>
-          <ion-button class="ion-focused">Default</ion-button>
-          <ion-button class="ion-focused"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
-          <ion-button class="ion-focused" shape="round">Round</ion-button>
-          <ion-button class="ion-focused" fill="outline">Outline</ion-button>
-          <ion-button class="ion-focused" fill="clear">Clear</ion-button>
-          <ion-button class="ion-focused" color="secondary">Default</ion-button>
-          <ion-button class="ion-focused" color="tertiary"
-            ><ion-icon slot="icon-only" name="star"></ion-icon
-          ></ion-button>
-          <ion-button class="ion-focused" color="danger" shape="round" fill="outline">Round</ion-button>
-          <ion-button class="ion-focused" color="warning" fill="outline">Outline</ion-button>
-          <ion-button class="ion-focused" color="dark" fill="clear">Clear</ion-button>
-        </p>
-
-        <h3>Activated</h3>
-        <p>
-          <ion-button class="ion-activated">Default</ion-button>
-          <ion-button class="ion-activated"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
-          <ion-button class="ion-activated" shape="round">Round</ion-button>
-          <ion-button class="ion-activated" fill="outline">Outline</ion-button>
-          <ion-button class="ion-activated" fill="clear">Clear</ion-button>
-          <ion-button class="ion-activated" color="secondary">Default</ion-button>
-          <ion-button class="ion-activated" color="tertiary"
-            ><ion-icon slot="icon-only" name="star"></ion-icon
-          ></ion-button>
-          <ion-button class="ion-activated" color="danger" shape="round" fill="outline">Round</ion-button>
-          <ion-button class="ion-activated" color="warning" fill="outline">Outline</ion-button>
-          <ion-button class="ion-activated" color="dark" fill="clear">Clear</ion-button>
-        </p>
-
-        <h3>Custom</h3>
-        <p>
-          <ion-button class="custom">Default</ion-button>
-          <ion-button class="custom"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
-          <ion-button class="custom" shape="round">Round</ion-button>
-          <ion-button class="custom" fill="outline">Outline</ion-button>
-          <ion-button class="custom" fill="clear">Clear</ion-button>
-          <ion-button class="custom" color="secondary">Default</ion-button>
-          <ion-button class="custom" color="tertiary"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
-          <ion-button class="custom" color="danger" shape="round" fill="outline">Round</ion-button>
-          <ion-button class="custom" color="warning" fill="outline">Outline</ion-button>
-          <ion-button class="custom" color="dark" fill="clear">Clear</ion-button>
-          <ion-button class="custom ion-focused">Default</ion-button>
-          <ion-button class="custom ion-focused"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
-          <ion-button class="custom ion-focused" shape="round">Round</ion-button>
-          <ion-button class="custom ion-focused" fill="outline">Outline</ion-button>
-          <ion-button class="custom ion-focused" fill="clear">Clear</ion-button>
-          <ion-button class="custom ion-focused" color="secondary">Default</ion-button>
-          <ion-button class="custom ion-focused" color="tertiary"
-            ><ion-icon slot="icon-only" name="star"></ion-icon
-          ></ion-button>
-          <ion-button class="custom ion-focused" color="danger" shape="round" fill="outline">Round</ion-button>
-          <ion-button class="custom ion-focused" color="warning" fill="outline">Outline</ion-button>
-          <ion-button class="custom ion-focused" color="dark" fill="clear">Clear</ion-button>
-          <ion-button class="custom ion-activated">Default</ion-button>
-          <ion-button class="custom ion-activated"><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
-          <ion-button class="custom ion-activated" shape="round">Round</ion-button>
-          <ion-button class="custom ion-activated" fill="outline">Outline</ion-button>
-          <ion-button class="custom ion-activated" fill="clear">Clear</ion-button>
-          <ion-button class="custom ion-activated" color="secondary">Default</ion-button>
-          <ion-button class="custom ion-activated" color="tertiary"
-            ><ion-icon slot="icon-only" name="star"></ion-icon
-          ></ion-button>
-          <ion-button class="custom ion-activated" color="danger" shape="round" fill="outline">Round</ion-button>
-          <ion-button class="custom ion-activated" color="warning" fill="outline">Outline</ion-button>
-          <ion-button class="custom ion-activated" color="dark" fill="clear">Clear</ion-button>
-        </p>
-
-        <div class="custom-variables">
-          <ion-button>Button</ion-button>
-          <ion-button fill="clear">Button</ion-button>
-          <ion-button fill="outline">Button</ion-button>
-
-          <br />
-
-          <ion-button class="ion-focused">Button</ion-button>
-          <ion-button class="ion-focused" fill="clear">Button</ion-button>
-          <ion-button class="ion-focused" fill="outline">Button</ion-button>
-
-          <br />
-
-          <ion-button color="tertiary">Button</ion-button>
-          <ion-button color="tertiary" fill="clear">Button</ion-button>
-          <ion-button color="tertiary" fill="outline">Button</ion-button>
-
-          <br />
-
-          <ion-button color="tertiary" class="ion-focused">Button</ion-button>
-          <ion-button color="tertiary" class="ion-focused" fill="clear">Button</ion-button>
-          <ion-button color="tertiary" class="ion-focused" fill="outline">Button</ion-button>
-        </div>
-      </ion-content>
-    </ion-app>
-
-    <style>
-      .custom {
-        --background-hover: red;
-        --background-hover-opacity: 1;
-
-        --background-focused: green;
-        --background-activated: blue;
-      }
-
-      .custom:hover {
-        opacity: 1;
-      }
-
-      /* TODO should this inherit or users set all */
-      .custom {
-        --color: red;
-      }
-
-      .custom-variables ion-button {
-        --color: black;
-
-        --background: pink;
-        --background-focused: red;
-        --background-hover: green;
-
-        --background-focused-opacity: 0.5;
-        --background-hover-opacity: 0.5;
-      }
-    </style>
-  </body>
-</html>
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..87edc67bea
--- /dev/null
+++ b/core/src/components/button/test/strong/button.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('button: strong', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/button/test/strong`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`button-strong-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/button/test/strong/button.e2e.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
new file mode 100644
index 0000000000..faaafa6496
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.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
new file mode 100644
index 0000000000..21886c1265
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.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
new file mode 100644
index 0000000000..c754490bf0
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..59dc21fe50
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ef2c7f1deb
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f8dd8b4212
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.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
new file mode 100644
index 0000000000..c33b34e63a
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.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
new file mode 100644
index 0000000000..ea24d8855e
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.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
new file mode 100644
index 0000000000..6bf10e70b5
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..30320eb2ad
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Firefox-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..76f66e7edb
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..82ad414043
Binary files /dev/null and b/core/src/components/button/test/strong/button.e2e.ts-snapshots/button-strong-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/strong/e2e.ts b/core/src/components/button/test/strong/e2e.ts
deleted file mode 100644
index f0778120c1..0000000000
--- a/core/src/components/button/test/strong/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: strong', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/strong?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/button/test/toolbar/e2e.ts b/core/src/components/button/test/toolbar/e2e.ts
deleted file mode 100644
index fdc8dddd4b..0000000000
--- a/core/src/components/button/test/toolbar/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('button: toolbar', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/button/test/toolbar?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/button/test/toolbar/index.html b/core/src/components/button/test/toolbar/index.html
deleted file mode 100644
index fc7ebee6c5..0000000000
--- a/core/src/components/button/test/toolbar/index.html
+++ /dev/null
@@ -1,265 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Button - Toolbar</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Button - Toolbar</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content id="content">
-        <ion-toolbar class="ion-no-padding">
-          <ion-title>This should have no padding</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button>
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button color="secondary">
-              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar color="primary">
-          <ion-buttons slot="secondary">
-            <ion-button class="closeButton" fill="clear"> Close </ion-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button color="secondary">
-              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar color="dark">
-          <ion-buttons slot="secondary">
-            <ion-button class="closeButton" fill="solid"> Close </ion-button>
-            <ion-button fill="solid">
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button fill="solid" color="secondary">
-              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button>
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button>
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button color="secondary">
-              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Defaults</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button class="ion-activated">
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button class="ion-activated">
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button color="secondary" class="ion-activated">
-              <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Defaults.activated</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button fill="solid">
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button fill="solid">
-              <ion-icon name="person-circle" slot="start"></ion-icon>
-              Solid
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Solid</ion-title>
-          <ion-buttons slot="primary">
-            <ion-button fill="solid" shape="round" color="secondary">
-              Help
-              <ion-icon name="help-circle" slot="end"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button fill="solid" class="ion-activated">
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button fill="solid" class="ion-activated">
-              <ion-icon name="person-circle" slot="start"></ion-icon>
-              Solid
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Solid Activated</ion-title>
-          <ion-buttons slot="primary">
-            <ion-button fill="solid" shape="round" color="secondary" class="ion-activated">
-              Help
-              <ion-icon name="help-circle" slot="end"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button fill="outline">
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button fill="outline">
-              <ion-icon name="star" slot="start"></ion-icon>
-              Star
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button color="secondary" fill="outline">
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Outline</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button fill="outline" class="ion-activated">
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-            <ion-button fill="outline" class="ion-activated">
-              <ion-icon name="star" slot="start"></ion-icon>
-              Star
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button color="secondary" fill="outline" class="ion-activated">
-              <ion-icon slot="icon-only" name="person-circle"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Outline.activated</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button>
-              <ion-icon name="person-circle" slot="start"></ion-icon>
-              Clear
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button href="#">
-              Edit
-              <ion-icon name="create" slot="end"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Icon/Color Attr</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button> Go Back </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button href="#"> Edit </ion-button>
-          </ion-buttons>
-          <ion-title>Text Only</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="start">
-            <ion-button>
-              <ion-icon slot="icon-only" name="menu"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-buttons slot="secondary">
-            <ion-button>
-              <ion-icon slot="icon-only" name="star"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Left side menu toggle</ion-title>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="primary">
-            <ion-button>
-              <ion-icon slot="icon-only" name="star"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-title>Right side menu toggle</ion-title>
-          <ion-buttons slot="end">
-            <ion-button>
-              <ion-icon slot="icon-only" name="menu"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-buttons slot="primary">
-            <ion-button>
-              <ion-icon slot="icon-only" name="search"></ion-icon>
-            </ion-button>
-          </ion-buttons>
-          <ion-segment color="secondary">
-            <ion-segment-button value="something"> Something </ion-segment-button>
-            <ion-segment-button value="else"> Else </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-
-        <ion-toolbar>
-          <ion-segment>
-            <ion-segment-button value="light"> Light </ion-segment-button>
-            <ion-segment-button value="toolbar"> Toolbar </ion-segment-button>
-            <ion-segment-button value="default"> Default Segment </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>