diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
index cd19cda5275..98949db821e 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.scss
+++ b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -262,6 +262,40 @@ $loading-panel-height: 53px;
         // other way around.
         background-color: var(--p-color-bg-hover);
       }
+
+      // stylelint-disable selector-max-class, max-nesting-depth, selector-max-combinators, selector-max-compound-selectors -- se23 status hover styles
+      &.statusCritical {
+        &,
+        .TableCell-first,
+        .TableCell-first + .TableCell {
+          background-color: var(--p-color-bg-critical-subdued-hover);
+        }
+      }
+
+      &.statusSubdued {
+        &,
+        .TableCell-first,
+        .TableCell-first + .TableCell {
+          background-color: var(--p-color-bg-subdued-hover);
+        }
+      }
+
+      &.statusSuccess {
+        &,
+        .TableCell-first,
+        .TableCell-first + .TableCell {
+          background-color: var(--p-color-bg-success-subdued-hover);
+        }
+      }
+
+      &.TableRow-subdued {
+        &,
+        .TableCell-first,
+        .TableCell-first + .TableCell {
+          background-color: var(--p-color-bg-subdued-hover);
+        }
+      }
+      // stylelint-enable selector-max-class, max-nesting-depth, selector-max-combinators, selector-max-compound-selectors -- se23 status hover styles
     }
   }
 
diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
index 9b3590f50f0..e170da57088 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
+++ b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
@@ -657,6 +657,100 @@ export function WithDisabledRows() {
   );
 }
 
+export function WithSubduedRows() {
+  const customers = [
+    {
+      id: '3410',
+      url: '#',
+      name: 'Mae Jemison',
+      location: 'Decatur, USA',
+      orders: 20,
+      amountSpent: '$2,400',
+    },
+    {
+      id: '3412',
+      url: '#',
+      name: 'Sam Jemison',
+      location: 'Decatur, USA',
+      orders: 20,
+      amountSpent: '$400',
+    },
+    {
+      id: '2563',
+      url: '#',
+      name: 'Ellen Ochoa',
+      location: 'Los Angeles, USA',
+      orders: 30,
+      amountSpent: '$140',
+    },
+  ];
+  const resourceName = {
+    singular: 'customer',
+    plural: 'customers',
+  };
+
+  const {selectedResources, allResourcesSelected, handleSelectionChange} =
+    useIndexResourceState(customers);
+
+  const rowMarkup = customers.map(
+    ({id, name, location, orders, amountSpent}, index) => (
+      <IndexTable.Row
+        id={id}
+        key={id}
+        selected={selectedResources.includes(id)}
+        position={index}
+        subdued={index === 1 || index === 2}
+      >
+        <IndexTable.Cell>
+          <Text fontWeight="bold" as="span">
+            {name}
+          </Text>
+        </IndexTable.Cell>
+        <IndexTable.Cell>{location}</IndexTable.Cell>
+        <IndexTable.Cell>
+          <Text as="span" alignment="end" numeric>
+            {orders}
+          </Text>
+        </IndexTable.Cell>
+        <IndexTable.Cell>
+          <Text as="span" alignment="end" numeric>
+            {amountSpent}
+          </Text>
+        </IndexTable.Cell>
+      </IndexTable.Row>
+    ),
+  );
+
+  return (
+    <LegacyCard>
+      <IndexTable
+        resourceName={resourceName}
+        itemCount={customers.length}
+        selectedItemsCount={
+          allResourcesSelected ? 'All' : selectedResources.length
+        }
+        onSelectionChange={handleSelectionChange}
+        headings={[
+          {title: 'Name'},
+          {title: 'Location'},
+          {
+            alignment: 'end',
+            id: 'order-count',
+            title: 'Order count',
+          },
+          {
+            alignment: 'end',
+            id: 'amount-spent',
+            title: 'Amount spent',
+          },
+        ]}
+      >
+        {rowMarkup}
+      </IndexTable>
+    </LegacyCard>
+  );
+}
+
 export function WithEmptyState() {
   const customers = [];
   const resourceName = {