diff --git a/core/src/components/item/test/highlight/item.e2e.ts b/core/src/components/item/test/highlight/item.e2e.ts
index 29a64ab859..9257a7214c 100644
--- a/core/src/components/item/test/highlight/item.e2e.ts
+++ b/core/src/components/item/test/highlight/item.e2e.ts
@@ -7,6 +7,8 @@ test.describe('item: highlight', () => {
 
     await page.setIonViewport();
 
-    expect(await page.screenshot()).toMatchSnapshot(`item-highlight-diff-${page.getSnapshotSettings()}.png`);
+    expect(await page.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `item-highlight-diff-${page.getSnapshotSettings()}.png`
+    );
   });
 });
diff --git a/core/src/components/list/test/inset/index.html b/core/src/components/list/test/inset/index.html
index f6ba3949a5..64e8d00bf2 100644
--- a/core/src/components/list/test/inset/index.html
+++ b/core/src/components/list/test/inset/index.html
@@ -96,16 +96,6 @@
               <ion-select-option>3</ion-select-option>
             </ion-select>
           </ion-item>
-
-          <ion-item>
-            <ion-label>Normal Datetime</ion-label>
-            <ion-datetime value="2022-11-29"></ion-datetime>
-          </ion-item>
-
-          <ion-item>
-            <ion-label position="stacked">Stacked Datetime</ion-label>
-            <ion-datetime value="2022-11-29"></ion-datetime>
-          </ion-item>
         </ion-list>
       </ion-content>
     </ion-app>
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Chrome-linux.png
index 7a4c1fa1ad..5e7b781b4c 100644
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Firefox-linux.png
index 9952917bb4..cec916a3f2 100644
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Safari-linux.png
index 0884518309..a9fb479c53 100644
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Chrome-linux.png
index beff756db7..e8bd9a22f8 100644
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Firefox-linux.png
index f115fa775c..19c9f20800 100644
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Safari-linux.png
index 9552d0555c..52b80e32b9 100644
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Chrome-linux.png
index a917388498..aea501b3c2 100644
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Firefox-linux.png
index b8125533a3..835de87d4c 100644
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Safari-linux.png
index f422da12d3..57f5686cff 100644
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Chrome-linux.png
index 7a6c1920f7..e9cf3fda98 100644
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Firefox-linux.png
index 9a3c07d423..80f8645f22 100644
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Safari-linux.png
index 750a194a32..734b76a6b4 100644
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-ltr-Mobile-Safari-linux.png
index c5ba9e305c..5d08aa47bb 100644
Binary files a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-rtl-Mobile-Safari-linux.png
index 886c15118a..34fbeb67c9 100644
Binary files a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-ltr-Mobile-Safari-linux.png
index b4da6014b4..ea053e6087 100644
Binary files a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-rtl-Mobile-Safari-linux.png
index 1d34b4acc8..6ed0768abc 100644
Binary files a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-no-event-popover-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Safari-linux.png
index f2e36bcc82..13fea1eeca 100644
Binary files a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-rtl-Mobile-Safari-linux.png
index b37d1a45e4..3e4c8c4cd9 100644
Binary files a/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/popover/test/size/popover.e2e.ts-snapshots/popover-size-no-event-trigger-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Safari-linux.png
index 456742dd48..19074a36b7 100644
Binary files a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Safari-linux.png
index e2275804ab..f49220b2e6 100644
Binary files a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/test.utils.ts b/core/src/components/popover/test/test.utils.ts
index 1bbf821bf1..5edabd3cc9 100644
--- a/core/src/components/popover/test/test.utils.ts
+++ b/core/src/components/popover/test/test.utils.ts
@@ -33,8 +33,8 @@ export const closePopover = async (page: E2EPage, popover?: Locator) => {
 
 export const screenshotPopover = async (page: E2EPage, buttonID: string, testName: string) => {
   await page.goto(`src/components/popover/test/${testName}`);
+  await page.setIonViewport();
 
   await openPopover(page, buttonID);
-  await page.setIonViewport();
   expect(await page.screenshot()).toMatchSnapshot(`popover-${testName}-${buttonID}-${page.getSnapshotSettings()}.png`);
 };
diff --git a/core/src/components/tab-bar/test/basic/e2e.ts b/core/src/components/tab-bar/test/basic/e2e.ts
deleted file mode 100644
index b615a77769..0000000000
--- a/core/src/components/tab-bar/test/basic/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('tab-bar: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/tab-bar/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts
new file mode 100644
index 0000000000..f4cb3559ad
--- /dev/null
+++ b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts
@@ -0,0 +1,32 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('tab-bar: basic', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+    skip.mode('md', 'Translucent is only available in iOS mode');
+  });
+  test('should render tab bar', async ({ page }) => {
+    await page.setContent(`
+      <ion-tab-bar selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-label>Recents</ion-label>
+          <ion-icon name="call"></ion-icon>
+        </ion-tab-button>
+
+        <ion-tab-button tab="2">
+          <ion-label>Favorites</ion-label>
+          <ion-badge>23</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="3">
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+    `);
+
+    const tabBar = page.locator('ion-tab-bar');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`tab-bar-basic-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..11a2ccea5d
Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..02055f88e6
Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9b9f2d0941
Binary files /dev/null and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-basic-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-bar/test/custom/e2e.ts b/core/src/components/tab-bar/test/custom/e2e.ts
deleted file mode 100644
index 1cef6de0da..0000000000
--- a/core/src/components/tab-bar/test/custom/e2e.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('tab-bar: custom', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/tab-bar/test/custom?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-
-  const tabBar = await page.find('ion-tab-bar');
-  await tabBar.waitForVisible();
-
-  screenshotCompares.push(await page.compareScreenshot('tab-bar: custom default'));
-
-  await page.keyboard.press('Tab');
-
-  screenshotCompares.push(await page.compareScreenshot('tab-bar: custom tabbed'));
-  await page.waitForTimeout(10000);
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/tab-bar/test/custom/index.html b/core/src/components/tab-bar/test/custom/index.html
index 8c9e3fbd01..bfbc93c955 100644
--- a/core/src/components/tab-bar/test/custom/index.html
+++ b/core/src/components/tab-bar/test/custom/index.html
@@ -128,7 +128,7 @@
             <ion-icon name="star" class="custom-icon"></ion-icon>
           </ion-tab-button>
 
-          <ion-tab-button tab="33333">
+          <ion-tab-button tab="33333" class="custom-all-tab-button">
             <ion-icon name="cog"></ion-icon>
             <ion-label>Settings</ion-label>
           </ion-tab-button>
@@ -202,6 +202,11 @@
         height: 80px;
       }
 
+      .custom-all-tab-button {
+        --background: rgba(163, 43, 43, 0.6);
+        --color: white;
+      }
+
       .custom-icon {
         font-size: 50px;
       }
diff --git a/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts
new file mode 100644
index 0000000000..4a2ec1cc15
--- /dev/null
+++ b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts
@@ -0,0 +1,15 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('tab-bar: custom', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+  test('should render custom tab bar', async ({ page }) => {
+    await page.goto('/src/components/tab-bar/test/custom');
+
+    const tabBar = page.locator('ion-tab-bar.custom-all');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`tab-bar-custom-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6d953853e6
Binary files /dev/null and b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d6120b9fb0
Binary files /dev/null and b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9fcf9f380e
Binary files /dev/null and b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3729df1d52
Binary files /dev/null and b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a1303f65a1
Binary files /dev/null and b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..77c7f3cb66
Binary files /dev/null and b/core/src/components/tab-bar/test/custom/tab-bar.e2e.ts-snapshots/tab-bar-custom-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-bar/test/scenarios/camera.svg b/core/src/components/tab-bar/test/scenarios/camera.svg
deleted file mode 100644
index 0e7f06037a..0000000000
--- a/core/src/components/tab-bar/test/scenarios/camera.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
\ No newline at end of file
diff --git a/core/src/components/tab-bar/test/scenarios/e2e.ts b/core/src/components/tab-bar/test/scenarios/e2e.ts
deleted file mode 100644
index 11606ca8f2..0000000000
--- a/core/src/components/tab-bar/test/scenarios/e2e.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('tab-bar: scenarios', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/tab-bar/test/scenarios?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('tab-bar:rtl: scenarios', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/tab-bar/test/scenarios?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/tab-bar/test/scenarios/index.html b/core/src/components/tab-bar/test/scenarios/index.html
deleted file mode 100644
index 11a494f90a..0000000000
--- a/core/src/components/tab-bar/test/scenarios/index.html
+++ /dev/null
@@ -1,247 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Tab Bar - Scenarios</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
-    />
-    <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>
-    <link rel="stylesheet" href="../../../../../css/ionic.bundle.css" />
-    <link rel="stylesheet" href="../../../../../scripts/testing/styles.css" />
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-content>
-        <!-- Default -->
-        <ion-tab-bar selected-tab="1">
-          <ion-tab-button tab="1">
-            <ion-label>Recents</ion-label>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2">
-            <ion-label>Favorites</ion-label>
-            <ion-badge>6</ion-badge>
-          </ion-tab-button>
-
-          <ion-tab-button tab="3">
-            <ion-label>Settings</ion-label>
-          </ion-tab-button>
-        </ion-tab-bar>
-
-        <!-- Icons -->
-        <ion-tab-bar color="primary" selected-tab="1">
-          <ion-tab-button tab="1">
-            <ion-icon name="call"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2" selected-tab="1">
-            <ion-icon name="heart"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="3">
-            <ion-icon name="settings"></ion-icon>
-          </ion-tab-button>
-        </ion-tab-bar>
-
-        <!-- Icons on top of text -->
-        <ion-tab-bar color="secondary" selected-tab="1">
-          <ion-tab-button tab="1">
-            <ion-label>Location</ion-label>
-            <ion-icon name="navigate-circle"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2">
-            <ion-badge>6</ion-badge>
-            <ion-icon name="heart"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="3">
-            <ion-label>Radio</ion-label>
-            <ion-icon name="musical-notes"></ion-icon>
-          </ion-tab-button>
-        </ion-tab-bar>
-
-        <!-- Icons below text -->
-        <ion-tab-bar color="dark" selected-tab="1">
-          <ion-tab-button tab="1" layout="icon-bottom">
-            <ion-label>Recents</ion-label>
-            <ion-icon name="call"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2">
-            <ion-badge>6</ion-badge>
-            <ion-label>hi</ion-label>
-            <ion-icon name="heart"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="3" layout="icon-bottom">
-            <ion-label>Settings</ion-label>
-            <ion-icon name="settings"></ion-icon>
-          </ion-tab-button>
-        </ion-tab-bar>
-
-        <!-- Icons right of text -->
-        <ion-tab-bar color="danger" selected-tab="1">
-          <ion-tab-button tab="1" layout="icon-end">
-            <ion-label>Recents</ion-label>
-            <ion-icon name="call"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2" layout="icon-end">
-            <ion-label>Favorites</ion-label>
-            <ion-icon name="heart"></ion-icon>
-            <ion-badge>6</ion-badge>
-          </ion-tab-button>
-
-          <ion-tab-button tab="3" layout="icon-end">
-            <ion-label>Settings</ion-label>
-            <ion-icon name="settings"></ion-icon>
-          </ion-tab-button>
-        </ion-tab-bar>
-
-        <!-- Icons left of text -->
-        <ion-tab-bar color="light" selected-tab="1">
-          <ion-tab-button tab="1" layout="icon-start">
-            <ion-label>Recents</ion-label>
-            <ion-icon name="call"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2" layout="icon-start">
-            <ion-label>Favorites</ion-label>
-            <ion-icon name="heart"></ion-icon>
-            <ion-badge color="danger">6</ion-badge>
-          </ion-tab-button>
-
-          <ion-tab-button tab="3" layout="icon-start">
-            <ion-label>Settings</ion-label>
-            <ion-icon name="settings"></ion-icon>
-          </ion-tab-button>
-        </ion-tab-bar>
-
-        <!-- No icons -->
-        <ion-tab-bar color="primary" selected-tab="1">
-          <ion-tab-button tab="1" layout="icon-hide">
-            <ion-label>Recents</ion-label>
-            <ion-icon name="call"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2" layout="icon-hide">
-            <ion-label>Favorites</ion-label>
-            <ion-icon name="heart"></ion-icon>
-            <ion-badge color="danger">6</ion-badge>
-          </ion-tab-button>
-
-          <ion-tab-button tab="3" layout="icon-hide">
-            <ion-label>Settings</ion-label>
-            <ion-icon name="settings"></ion-icon>
-          </ion-tab-button>
-        </ion-tab-bar>
-
-        <!-- No label -->
-        <ion-tab-bar color="secondary" selected-tab="1">
-          <ion-tab-button tab="1" layout="label-hide">
-            <ion-label>Recents</ion-label>
-            <ion-icon name="navigate-circle"></ion-icon>
-            <ion-badge>6</ion-badge>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2" layout="label-hide">
-            <ion-label>Favorites</ion-label>
-            <ion-icon name="heart"></ion-icon>
-            <ion-badge color="danger">6</ion-badge>
-          </ion-tab-button>
-
-          <ion-tab-button tab="3" layout="label-hide">
-            <ion-label>Settings</ion-label>
-            <ion-icon name="settings"></ion-icon>
-          </ion-tab-button>
-        </ion-tab-bar>
-
-        <!-- No overflow text -->
-        <ion-tab-bar color="danger" selected-tab="1">
-          <ion-tab-button tab="1">
-            <ion-label>Indiana Jones and the Raiders of the Lost Ark</ion-label>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2">
-            <ion-label>Indiana Jones and the Temple of Doom</ion-label>
-          </ion-tab-button>
-
-          <ion-tab-button tab="3">
-            <ion-label>Indiana Jones and the Last Crusade</ion-label>
-          </ion-tab-button>
-        </ion-tab-bar>
-
-        <!-- Custom Tab Bar -->
-        <ion-tab-bar selected-tab="1" class="custom-tabbar">
-          <ion-tab-button tab="1">
-            <ion-label>Location</ion-label>
-            <ion-icon name="navigate-circle"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2" class="main-tab">
-            <ion-icon class="main-tab-icon" src="/src/components/tab-bar/test/scenarios/camera.svg"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="3">
-            <ion-label>Radio</ion-label>
-            <ion-icon name="musical-notes"></ion-icon>
-          </ion-tab-button>
-        </ion-tab-bar>
-
-        <!-- Custom Tab Bar Colors -->
-        <ion-tab-bar selected-tab="1" class="custom-tabbar-color">
-          <ion-tab-button tab="1">
-            <ion-label>Location</ion-label>
-            <ion-icon name="navigate-circle"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="2">
-            <ion-icon name="settings"></ion-icon>
-          </ion-tab-button>
-
-          <ion-tab-button tab="3">
-            <ion-label>Radio</ion-label>
-            <ion-icon name="musical-notes"></ion-icon>
-          </ion-tab-button>
-        </ion-tab-bar>
-      </ion-content>
-    </ion-app>
-
-    <style>
-      .custom-tabbar {
-        margin-top: 30px;
-        margin-bottom: 30px;
-        overflow: visible;
-        contain: none;
-      }
-
-      .main-tab {
-        border-radius: 50%;
-        max-width: 80px;
-        height: 80px;
-        --background: #3880ff;
-        --color: rgba(255, 255, 255, 0.7);
-        --color-selected: white;
-      }
-
-      .main-tab-icon {
-        font-size: 36px;
-      }
-
-      .custom-tabbar-color {
-        --background: #7044ff;
-      }
-
-      .custom-tabbar-color ion-tab-button {
-        --color: rgba(255, 255, 255, 0.7);
-        --color-selected: white;
-      }
-    </style>
-  </body>
-</html>
diff --git a/core/src/components/tab-bar/test/spec/e2e.ts b/core/src/components/tab-bar/test/spec/e2e.ts
deleted file mode 100644
index dc2cda06ad..0000000000
--- a/core/src/components/tab-bar/test/spec/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('tab-bar: spec', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/tab-bar/test/spec?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/tab-bar/test/spec/index.html b/core/src/components/tab-bar/test/spec/index.html
deleted file mode 100644
index c45421b1af..0000000000
--- a/core/src/components/tab-bar/test/spec/index.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Tab Bar - Spec</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
-    />
-    <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>
-    <link rel="stylesheet" href="../../../../../css/ionic.bundle.css" />
-    <link rel="stylesheet" href="../../../../../scripts/testing/styles.css" />
-  </head>
-
-  <body>
-    <!-- Default -->
-    <ion-tab-bar selected-tab="1">
-      <ion-tab-button tab="1">
-        <ion-label>Recents</ion-label>
-      </ion-tab-button>
-
-      <ion-tab-button tab="2">
-        <ion-label>Favorites</ion-label>
-        <ion-badge>6</ion-badge>
-      </ion-tab-button>
-
-      <ion-tab-button tab="3">
-        <ion-label>Settings</ion-label>
-      </ion-tab-button>
-    </ion-tab-bar>
-
-    <!-- Default -->
-    <ion-tab-bar selected-tab="2">
-      <ion-tab-button tab="1">
-        <ion-label>Favorites</ion-label>
-        <ion-icon name="star"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="2">
-        <ion-label>Recents</ion-label>
-        <ion-icon name="time"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="3">
-        <ion-label>Contacts</ion-label>
-        <ion-icon name="person-circle-outline"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="4">
-        <ion-label>Keypad</ion-label>
-        <ion-icon name="apps"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="5">
-        <ion-label>Voicemail</ion-label>
-        <ion-icon name="recording-outline"></ion-icon>
-      </ion-tab-button>
-    </ion-tab-bar>
-
-    <!-- Badges -->
-    <ion-tab-bar selected-tab="1">
-      <ion-tab-button tab="1">
-        <ion-icon name="heart"></ion-icon>
-        <ion-label>Item One Max</ion-label>
-        <ion-badge color="danger"></ion-badge>
-      </ion-tab-button>
-
-      <ion-tab-button tab="2">
-        <ion-icon name="musical-note"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="3">
-        <ion-icon name="today"></ion-icon>
-        <ion-badge color="danger">88</ion-badge>
-      </ion-tab-button>
-
-      <ion-tab-button tab="4">
-        <ion-icon name="calendar"></ion-icon>
-        <ion-badge color="danger">888+</ion-badge>
-      </ion-tab-button>
-    </ion-tab-bar>
-
-    <ion-tab-bar selected-tab="1">
-      <ion-tab-button tab="1">
-        <ion-icon name="musical-note"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="2" layout="icon-bottom">
-        <ion-icon name="heart"></ion-icon>
-        <ion-label>Item One Max</ion-label>
-        <ion-badge color="danger"></ion-badge>
-      </ion-tab-button>
-
-      <ion-tab-button tab="3">
-        <ion-icon name="today"></ion-icon>
-        <ion-badge color="danger">88</ion-badge>
-      </ion-tab-button>
-
-      <ion-tab-button tab="4">
-        <ion-icon name="calendar"></ion-icon>
-        <ion-badge color="danger">888+</ion-badge>
-      </ion-tab-button>
-    </ion-tab-bar>
-
-    <ion-tab-bar selected-tab="1">
-      <ion-tab-button tab="1">
-        <ion-icon name="heart"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="2">
-        <ion-icon name="musical-note"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="3">
-        <ion-icon name="today"></ion-icon>
-      </ion-tab-button>
-    </ion-tab-bar>
-
-    <ion-tab-bar selected-tab="1">
-      <ion-tab-button tab="1">
-        <ion-icon name="musical-note"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="2" layout="icon-bottom">
-        <ion-icon name="heart"></ion-icon>
-        <ion-label>Item One Max</ion-label>
-        <ion-badge color="danger">88</ion-badge>
-      </ion-tab-button>
-
-      <ion-tab-button tab="3">
-        <ion-icon name="today"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="4">
-        <ion-icon name="calendar"></ion-icon>
-      </ion-tab-button>
-    </ion-tab-bar>
-
-    <!-- Custom Height -->
-    <ion-tab-bar color="danger" selected-tab="3" class="custom-height">
-      <ion-tab-button tab="1">
-        <ion-icon name="heart"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="2">
-        <ion-icon name="musical-note"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="3">
-        <ion-icon name="today"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="4">
-        <ion-icon name="calendar"></ion-icon>
-      </ion-tab-button>
-    </ion-tab-bar>
-
-    <!-- Custom Height / Alignment -->
-    <ion-tab-bar color="tertiary" selected-tab="3" class="custom-height custom-top">
-      <ion-tab-button tab="1">
-        <ion-icon name="heart"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="2">
-        <ion-icon name="musical-note"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="3">
-        <ion-icon name="today"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="4">
-        <ion-icon name="calendar"></ion-icon>
-      </ion-tab-button>
-    </ion-tab-bar>
-
-    <!-- Translucent -->
-    <ion-tab-bar translucent>
-      <ion-tab-button tab="1">
-        <ion-icon name="heart"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="2">
-        <ion-icon name="musical-note"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="3">
-        <ion-icon name="today"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="4">
-        <ion-icon name="calendar"></ion-icon>
-      </ion-tab-button>
-    </ion-tab-bar>
-
-    <!-- Translucent / Custom Color -->
-    <ion-tab-bar translucent color="dark">
-      <ion-tab-button tab="1">
-        <ion-icon name="heart"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="2">
-        <ion-icon name="musical-note"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="3">
-        <ion-icon name="today"></ion-icon>
-      </ion-tab-button>
-
-      <ion-tab-button tab="4">
-        <ion-icon name="calendar"></ion-icon>
-      </ion-tab-button>
-    </ion-tab-bar>
-
-    <style>
-      body {
-        background: #222;
-      }
-
-      ion-tab-bar {
-        margin-bottom: 5px;
-      }
-
-      .custom-height {
-        height: 80px;
-      }
-
-      .custom-top ion-tab-button {
-        justify-content: start;
-      }
-    </style>
-  </body>
-</html>
diff --git a/core/src/components/tab-bar/test/translucent/e2e.ts b/core/src/components/tab-bar/test/translucent/e2e.ts
deleted file mode 100644
index c1f53bd321..0000000000
--- a/core/src/components/tab-bar/test/translucent/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('tab-bar: translucent', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/tab-bar/test/translucent?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts
new file mode 100644
index 0000000000..6267a0c707
--- /dev/null
+++ b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts
@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('tab-bar: translucent', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+    skip.mode('md', 'Translucent is only available in iOS mode');
+    skip.browser('firefox', 'Firefox does not support translucent effect');
+  });
+  test('should render translucent tab bar', async ({ page }) => {
+    await page.setContent(`
+      <style>
+        body {
+          background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
+        }
+      </style>
+      <ion-tab-bar translucent="true" selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="2">
+          <ion-label>Favorites</ion-label>
+          <ion-badge>23</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="3">
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+    `);
+
+    const tabBar = page.locator('ion-tab-bar');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`tab-bar-translucent-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2ef7dcb3fa
Binary files /dev/null and b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..97c568a6c1
Binary files /dev/null and b/core/src/components/tab-bar/test/translucent/tab-bar.e2e.ts-snapshots/tab-bar-translucent-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts b/core/src/components/tab-button/test/basic/tab-button.e2e.ts
new file mode 100644
index 0000000000..f46628e4a8
--- /dev/null
+++ b/core/src/components/tab-button/test/basic/tab-button.e2e.ts
@@ -0,0 +1,85 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('tab-button: basic', () => {
+  test('should render tab button with label', async ({ page }) => {
+    await page.setContent(`
+      <ion-tab-bar selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-label>Recents</ion-label>
+        </ion-tab-button>
+
+        <ion-tab-button tab="2">
+          <ion-label>Favorites</ion-label>
+          <ion-badge>23</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="3">
+          <ion-label>Settings</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+    `);
+
+    const tabBar = page.locator('ion-tab-bar');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`tab-button-label-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should render tab button with badges', async ({ page }) => {
+    await page.setContent(`
+      <ion-tab-bar selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-icon name="heart"></ion-icon>
+          <ion-label>Favorites</ion-label>
+          <ion-badge color="danger"></ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="2">
+          <ion-icon name="musical-note"></ion-icon>
+        </ion-tab-button>
+
+        <ion-tab-button tab="3">
+          <ion-icon name="today"></ion-icon>
+        </ion-tab-button>
+
+        <ion-tab-button tab="4">
+          <ion-icon name="calendar"></ion-icon>
+          <ion-badge color="danger">47</ion-badge>
+        </ion-tab-button>
+      </ion-tab-bar>
+    `);
+
+    const tabBar = page.locator('ion-tab-bar');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`tab-button-badge-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should render tab button with icons', async ({ page }) => {
+    await page.setContent(`
+      <ion-tab-bar selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-icon name="heart"></ion-icon>
+          <ion-label>Favorites</ion-label>
+          <ion-badge color="danger"></ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="2">
+          <ion-icon name="musical-note"></ion-icon>
+        </ion-tab-button>
+
+        <ion-tab-button tab="3">
+          <ion-icon name="today"></ion-icon>
+        </ion-tab-button>
+
+        <ion-tab-button tab="4">
+          <ion-icon name="calendar"></ion-icon>
+          <ion-badge color="danger">47</ion-badge>
+        </ion-tab-button>
+      </ion-tab-bar>
+    `);
+
+    const tabBar = page.locator('ion-tab-bar');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`tab-button-badge-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f8531c3f98
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3e0a9fd86a
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c765d389bb
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bb7618d539
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6d3e298d5f
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ff79419443
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..deee0c8776
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ede5b2c9e8
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e9a848d25a
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..281220e9f5
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d1c8c475ea
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..67642d1732
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-badge-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c78701bfc4
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b93657a0f8
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5cbfdfeaee
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0c617d2173
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..721a186e13
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..97c5490c27
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..be7827ea41
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8920cef644
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..6a1577ee28
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b21102d5ea
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5c0e87b2f4
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b0816a1789
Binary files /dev/null and b/core/src/components/tab-button/test/basic/tab-button.e2e.ts-snapshots/tab-button-label-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts b/core/src/components/tab-button/test/layout/tab-button.e2e.ts
new file mode 100644
index 0000000000..c429c283ee
--- /dev/null
+++ b/core/src/components/tab-button/test/layout/tab-button.e2e.ts
@@ -0,0 +1,133 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('tab-button: basic', () => {
+  test('should render tab button with icons left of text', async ({ page }) => {
+    await page.setContent(`
+      <ion-tab-bar color="light" selected-tab="1">
+        <ion-tab-button tab="1" layout="icon-start">
+          <ion-label>Recents</ion-label>
+          <ion-icon name="call"></ion-icon>
+          <ion-badge color="danger">12</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="2" layout="icon-start">
+          <ion-label>Favorites</ion-label>
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
+
+        <ion-tab-button tab="3" layout="icon-start">
+          <ion-label>Settings</ion-label>
+          <ion-icon name="settings"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
+    `);
+
+    const tabBar = page.locator('ion-tab-bar');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`tab-button-icon-left-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should render tab button with icons right of text', async ({ page }) => {
+    await page.setContent(`
+      <ion-tab-bar color="danger" selected-tab="1">
+        <ion-tab-button tab="1" layout="icon-end">
+          <ion-label>Recents</ion-label>
+          <ion-icon name="call"></ion-icon>
+        </ion-tab-button>
+
+        <ion-tab-button tab="2" layout="icon-end">
+          <ion-label>Favorites</ion-label>
+          <ion-icon name="heart"></ion-icon>
+          <ion-badge color="dark">33</ion-badge>
+        </ion-tab-button>
+
+        <ion-tab-button tab="3" layout="icon-end">
+          <ion-label>Settings</ion-label>
+          <ion-icon name="settings"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
+    `);
+
+    const tabBar = page.locator('ion-tab-bar');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`tab-button-icon-right-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should render tab button with icons below text', async ({ page }) => {
+    await page.setContent(`
+      <ion-tab-bar color="dark" selected-tab="1">
+        <ion-tab-button tab="1" layout="icon-bottom">
+          <ion-label>Recents</ion-label>
+          <ion-icon name="call"></ion-icon>
+        </ion-tab-button>
+
+        <ion-tab-button tab="2">
+          <ion-badge>16</ion-badge>
+          <ion-label>Favorites</ion-label>
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
+
+        <ion-tab-button tab="3" layout="icon-bottom">
+          <ion-label>Settings</ion-label>
+          <ion-icon name="settings"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
+    `);
+
+    const tabBar = page.locator('ion-tab-bar');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`tab-button-icon-below-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should render tab button with icons on top of text', async ({ page }) => {
+    await page.setContent(`
+      <ion-tab-bar color="secondary" selected-tab="1">
+        <ion-tab-button tab="1">
+          <ion-label>Location</ion-label>
+          <ion-icon name="navigate"></ion-icon>
+        </ion-tab-button>
+
+        <ion-tab-button tab="2">
+          <ion-badge color="danger">44</ion-badge>
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
+
+        <ion-tab-button tab="3">
+          <ion-label>Radio</ion-label>
+          <ion-icon name="musical-notes"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
+    `);
+
+    const tabBar = page.locator('ion-tab-bar');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`tab-button-icon-top-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should render tab button with no icons', async ({ page }) => {
+    await page.setContent(`
+      <ion-tab-bar color="primary" selected-tab="1">
+        <ion-tab-button tab="1" layout="icon-hide">
+          <ion-label>Recents</ion-label>
+          <ion-icon name="call"></ion-icon>
+        </ion-tab-button>
+
+        <ion-tab-button tab="2" layout="icon-hide">
+          <ion-label>Favorites</ion-label>
+          <ion-icon name="heart"></ion-icon>
+        </ion-tab-button>
+
+        <ion-tab-button tab="3" layout="icon-hide">
+          <ion-label>Settings</ion-label>
+          <ion-icon name="settings"></ion-icon>
+          <ion-badge color="danger">2</ion-badge>
+        </ion-tab-button>
+      </ion-tab-bar>
+    `);
+
+    const tabBar = page.locator('ion-tab-bar');
+
+    expect(await tabBar.screenshot()).toMatchSnapshot(`tab-button-no-icon-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e7ee68f45b
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..bc318fadf1
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..994642c059
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e7ea3ce603
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d241df8f35
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..55623cab46
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..cf06cb2854
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6a9d1a86ac
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..29fc8f9b1d
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..58763ef247
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..feeee12f52
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..78265e2237
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-below-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e61d0c8f8b
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ca2b74314a
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..6371006016
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..9511bed330
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..365625a2c1
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a7f8380ad4
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1f00a7ba8d
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..de0e4a41ea
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f03d67244d
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4a150af4d8
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..58148d28a3
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..73b3d03988
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-left-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..65a1747154
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..0068dd0425
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..09ed2f0ba2
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7bf585b7c4
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2ef1513a3c
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7b8584a707
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..cda4ed58be
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c59d7e72bf
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..0a7ae1b5f3
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..66bf6c622c
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..790eec37e6
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d707976d9f
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-right-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..648d1ef1fd
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f15ec28a8a
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..49649be18a
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bdf4583fd3
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5dc63455f8
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9f9a3ea43b
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c3f698d938
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c7f5e2f233
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ea2c5071bb
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ec94c2329f
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..683c3b05e3
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7a19747a1f
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-icon-top-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..68c299946d
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c816e8f449
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..02eefbdf4f
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3122bc2dc9
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..925c0c28f7
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1439e71023
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..172061b5e9
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8fd5cb25e1
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3cf45f21dd
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2e44515ccc
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..44203b8996
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Safari-linux.png b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9a89dca69a
Binary files /dev/null and b/core/src/components/tab-button/test/layout/tab-button.e2e.ts-snapshots/tab-button-no-icon-md-rtl-Mobile-Safari-linux.png differ