diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts b/core/src/components/tab-button/test/states/tab-button.e2e.ts
new file mode 100644
index 0000000000..bd10cad844
--- /dev/null
+++ b/core/src/components/tab-button/test/states/tab-button.e2e.ts
@@ -0,0 +1,82 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-button: states with no translucency'), () => {
+    test.describe('focus', () => {
+      test('should render correct focus state with default theme and no translucency', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-tab-bar style="width: 300px">
+            <ion-tab-button href="#" class="ion-focused">
+              <ion-label>Favorites</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+        await expect(tabBar).toHaveScreenshot(screenshot('tab-button-focus-no-translucency'));
+      });
+
+      test('should render correct focus state with custom theme and no translucency', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-tab-bar style="width: 300px" color="success">
+            <ion-tab-button href="#" class="ion-focused">
+              <ion-label>Favorites</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+        await expect(tabBar).toHaveScreenshot(screenshot('tab-button-focus-color-no-translucency'));
+      });
+    });
+  });
+});
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-button: states with translucency'), () => {
+    test.describe('focus', () => {
+      test('should render correct focus state with default theme and translucency', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-content color="dark">
+            <ion-tab-bar style="width: 300px" translucent="true">
+              <ion-tab-button href="#" class="ion-focused">
+                <ion-label>Favorites</ion-label>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </ion-content>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+        await expect(tabBar).toHaveScreenshot(screenshot('tab-button-focus-translucency'));
+      });
+
+      test('should render correct focus state with custom theme and translucency', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-content color="dark">
+            <ion-tab-bar style="width: 300px" color="success" translucent="true">
+              <ion-tab-button href="#" class="ion-focused">
+                <ion-label>Favorites</ion-label>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </ion-content>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+        await expect(tabBar).toHaveScreenshot(screenshot('tab-button-focus-color-translucency'));
+      });
+    });
+  });
+});
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4cc7cb8f9d
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1e87f27ad0
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..25135ac9f8
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0fcb18160a
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..aeea018600
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2c7955d6e2
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-no-translucency-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5d02508dae
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..37b7de053e
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3cfa4061a5
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-color-translucency-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f4e9118f06
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6fc34f8b91
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..03171f3c27
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f6a53b5fca
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8076024c28
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9db6a14cd9
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-no-translucency-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..99840ca7b4
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d565c66cbc
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Safari-linux.png b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c884751323
Binary files /dev/null and b/core/src/components/tab-button/test/states/tab-button.e2e.ts-snapshots/tab-button-focus-translucency-ios-ltr-Mobile-Safari-linux.png differ