diff --git a/core/src/components/item/item.ionic.scss b/core/src/components/item/item.ionic.scss
index 711005b230..3b33c393e5 100644
--- a/core/src/components/item/item.ionic.scss
+++ b/core/src/components/item/item.ionic.scss
@@ -91,9 +91,25 @@
   }
 }
 
+// Item: Disabled
+// --------------------------------------------------
+:host(.item-disabled) {
+  cursor: default;
+  pointer-events: none;
+
+  &::after {
+    @include globals.position(0, 0, 0, 0);
+
+    position: absolute;
+
+    background: #{globals.$ionic-state-disabled};
+
+    content: "";
+  }
+}
+
 // Item: Activated
 // --------------------------------------------------
-
 :host(.ion-activated) .item-native {
   background: var(--background-activated);
 }
diff --git a/core/src/components/item/test/disabled/item.e2e.ts b/core/src/components/item/test/disabled/item.e2e.ts
index 3e37ac267e..22c64215f8 100644
--- a/core/src/components/item/test/disabled/item.e2e.ts
+++ b/core/src/components/item/test/disabled/item.e2e.ts
@@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright';
 /**
  * This behavior does not vary across directions
  */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('item: disabled state'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/item/test/disabled`, config);
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..79523eadca
Binary files /dev/null and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b19723a3e8
Binary files /dev/null and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c97d7fdf91
Binary files /dev/null and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/theme-ionic/index.html b/core/src/components/item/test/theme-ionic/index.html
index e77375bcd3..a9f3b5c77a 100644
--- a/core/src/components/item/test/theme-ionic/index.html
+++ b/core/src/components/item/test/theme-ionic/index.html
@@ -134,14 +134,6 @@
           </ion-label>
         </ion-item>
 
-        <ion-item>
-          <ion-label>
-            <h1>Heading</h1>
-            <p>Normal paragraph</p>
-          </ion-label>
-          <ion-button slot="end" fill="outline">Outline</ion-button>
-        </ion-item>
-
         <ion-item>
           <ion-label slot="start">Start</ion-label>
           <ion-label>
@@ -150,13 +142,23 @@
           </ion-label>
         </ion-item>
 
-        <ion-item>
+        <ion-text color="primary">
+          <h2>Disabled Item</h2>
+        </ion-text>
+
+        <ion-item disabled>
+          <ion-label>
+            <h1>Heading</h1>
+            <p>Normal paragraph</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-item disabled>
           <ion-label slot="start">Start</ion-label>
           <ion-label>
             <h1>Heading</h1>
             <p>Normal paragraph</p>
           </ion-label>
-          <ion-button slot="end" fill="outline">Outline</ion-button>
         </ion-item>
         <ion-item-divider>
           <ion-label>Item activatable</ion-label>