From 8d43f4d55d16e9999bca8f01815411235b12c650 Mon Sep 17 00:00:00 2001
From: Andrew Ronaldson <aronalds@redhat.com>
Date: Thu, 23 Jul 2026 11:18:21 -0300
Subject: [PATCH 1/2] chore(table): add status labels to table demos

---
 .../src/demos/examples/TableColumnManagement.tsx     |  9 +++++----
 .../examples/TableColumnManagementWithDraggable.tsx  |  9 +++++----
 .../react-table/src/demos/examples/TableCompact.tsx  |  9 +++++----
 .../src/demos/examples/TableExpandCollapseAll.tsx    | 12 ++++++------
 .../src/demos/examples/TableFilterable.tsx           |  9 +++++----
 .../src/demos/examples/TableSortableResponsive.tsx   |  9 +++++----
 .../demos/examples/TableStaticBottomPagination.tsx   |  9 +++++----
 .../src/demos/examples/TableStickyHeader.tsx         | 10 +++++-----
 8 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/packages/react-table/src/demos/examples/TableColumnManagement.tsx b/packages/react-table/src/demos/examples/TableColumnManagement.tsx
index dbce50c5231..3f2d2940b19 100644
--- a/packages/react-table/src/demos/examples/TableColumnManagement.tsx
+++ b/packages/react-table/src/demos/examples/TableColumnManagement.tsx
@@ -10,6 +10,7 @@ import {
   DataListCell,
   DataListItemCells,
   Label,
+  LabelStatus,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -389,13 +390,13 @@ export const TableColumnManagement: React.FunctionComponent = () => {
   const renderLabel = (labelText: string): React.JSX.Element => {
     switch (labelText) {
       case 'Running':
-        return <Label color="green">{labelText}</Label>;
+        return <Label status={LabelStatus.success}>{labelText}</Label>;
       case 'Stopped':
-        return <Label color="orange">{labelText}</Label>;
+        return <Label status={LabelStatus.warning}>{labelText}</Label>;
       case 'Needs maintenance':
-        return <Label color="blue">{labelText}</Label>;
+        return <Label status={LabelStatus.info}>{labelText}</Label>;
       case 'Down':
-        return <Label color="red">{labelText}</Label>;
+        return <Label status={LabelStatus.danger}>{labelText}</Label>;
       default:
         return <></>;
     }
diff --git a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
index 37397a91b8d..44e82fc7a85 100644
--- a/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
+++ b/packages/react-table/src/demos/examples/TableColumnManagementWithDraggable.tsx
@@ -9,6 +9,7 @@ import {
   DataListItemCells,
   DataListControl,
   Label,
+  LabelStatus,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
@@ -284,13 +285,13 @@ export const TableColumnManagement: React.FunctionComponent = () => {
   const renderLabel = (labelText: string): React.JSX.Element => {
     switch (labelText) {
       case 'Running':
-        return <Label color="green">{labelText}</Label>;
+        return <Label status={LabelStatus.success}>{labelText}</Label>;
       case 'Stopped':
-        return <Label color="orange">{labelText}</Label>;
+        return <Label status={LabelStatus.warning}>{labelText}</Label>;
       case 'Needs maintenance':
-        return <Label color="blue">{labelText}</Label>;
+        return <Label status={LabelStatus.info}>{labelText}</Label>;
       case 'Down':
-        return <Label color="red">{labelText}</Label>;
+        return <Label status={LabelStatus.danger}>{labelText}</Label>;
       default:
         return <></>;
     }
diff --git a/packages/react-table/src/demos/examples/TableCompact.tsx b/packages/react-table/src/demos/examples/TableCompact.tsx
index 6c0db4c8be8..81c3fc31bee 100644
--- a/packages/react-table/src/demos/examples/TableCompact.tsx
+++ b/packages/react-table/src/demos/examples/TableCompact.tsx
@@ -12,6 +12,7 @@ import {
   ToolbarGroup,
   ToolbarItem,
   Label,
+  LabelStatus,
   PaginationVariant
 } from '@patternfly/react-core';
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
@@ -113,13 +114,13 @@ export const TableCompact: React.FunctionComponent = () => {
   const renderLabel = (labelText: string) => {
     switch (labelText) {
       case 'Running':
-        return <Label color="green">{labelText}</Label>;
+        return <Label status={LabelStatus.success}>{labelText}</Label>;
       case 'Stopped':
-        return <Label color="orange">{labelText}</Label>;
+        return <Label status={LabelStatus.warning}>{labelText}</Label>;
       case 'Needs Maintenance':
-        return <Label color="blue">{labelText}</Label>;
+        return <Label status={LabelStatus.info}>{labelText}</Label>;
       case 'Down':
-        return <Label color="red">{labelText}</Label>;
+        return <Label status={LabelStatus.danger}>{labelText}</Label>;
       default:
         return <></>;
     }
diff --git a/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx b/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx
index 2d594dad470..0ef407548f9 100644
--- a/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx
+++ b/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx
@@ -1,5 +1,5 @@
 import { Fragment, ReactNode, useEffect, useState } from 'react';
-import { Content, Label, PageSection } from '@patternfly/react-core';
+import { Content, Label, LabelStatus, PageSection } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
@@ -20,7 +20,7 @@ const serverData: Server[] = [
     threads: 18,
     applications: 42,
     workspaces: 7,
-    status: { title: <Label color="green">Running</Label> },
+    status: { title: <Label status={LabelStatus.success}>Running</Label> },
     details: (
       <Content>
         <p>
@@ -40,7 +40,7 @@ const serverData: Server[] = [
     threads: 9,
     applications: 24,
     workspaces: 17,
-    status: { title: <Label color="red">Down</Label> },
+    status: { title: <Label status={LabelStatus.danger}>Down</Label> },
     details: (
       <Content>
         <p>
@@ -60,7 +60,7 @@ const serverData: Server[] = [
     threads: 8,
     applications: 47,
     workspaces: 3,
-    status: { title: <Label color="green">Running</Label> },
+    status: { title: <Label status={LabelStatus.success}>Running</Label> },
     details: (
       <Content>
         <p>
@@ -80,7 +80,7 @@ const serverData: Server[] = [
     threads: 6,
     applications: 4,
     workspaces: 15,
-    status: { title: <Label color="blue">Needs Maintenance</Label> },
+    status: { title: <Label status={LabelStatus.info}>Needs Maintenance</Label> },
     details: (
       <Content>
         <p>
@@ -100,7 +100,7 @@ const serverData: Server[] = [
     threads: 9,
     applications: 24,
     workspaces: 17,
-    status: { title: <Label color="orange">Stopped</Label> },
+    status: { title: <Label status={LabelStatus.warning}>Stopped</Label> },
     details: (
       <Content>
         <p>
diff --git a/packages/react-table/src/demos/examples/TableFilterable.tsx b/packages/react-table/src/demos/examples/TableFilterable.tsx
index 1e068e94962..8158a9d7bec 100644
--- a/packages/react-table/src/demos/examples/TableFilterable.tsx
+++ b/packages/react-table/src/demos/examples/TableFilterable.tsx
@@ -8,6 +8,7 @@ import {
   EmptyStateBody,
   EmptyStateFooter,
   Label,
+  LabelStatus,
   MenuToggle,
   MenuToggleElement,
   Toolbar,
@@ -326,13 +327,13 @@ export const TableFilterable: React.FunctionComponent = () => {
   const renderLabel = (labelText: string) => {
     switch (labelText) {
       case 'Running':
-        return <Label color="green">{labelText}</Label>;
+        return <Label status={LabelStatus.success}>{labelText}</Label>;
       case 'Stopped':
-        return <Label color="orange">{labelText}</Label>;
+        return <Label status={LabelStatus.warning}>{labelText}</Label>;
       case 'Needs maintenance':
-        return <Label color="blue">{labelText}</Label>;
+        return <Label status={LabelStatus.info}>{labelText}</Label>;
       case 'Down':
-        return <Label color="red">{labelText}</Label>;
+        return <Label status={LabelStatus.danger}>{labelText}</Label>;
     }
   };
 
diff --git a/packages/react-table/src/demos/examples/TableSortableResponsive.tsx b/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
index adc558379b2..71259ef1076 100644
--- a/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
+++ b/packages/react-table/src/demos/examples/TableSortableResponsive.tsx
@@ -20,6 +20,7 @@ import {
   OverflowMenuDropdownItem,
   PaginationVariant,
   Label,
+  LabelStatus,
   Select,
   OverflowMenu,
   OverflowMenuContent,
@@ -120,13 +121,13 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
   const renderLabel = (labelText: string) => {
     switch (labelText) {
       case 'Running':
-        return <Label color="green">{labelText}</Label>;
+        return <Label status={LabelStatus.success}>{labelText}</Label>;
       case 'Stopped':
-        return <Label color="orange">{labelText}</Label>;
+        return <Label status={LabelStatus.warning}>{labelText}</Label>;
       case 'Needs Maintenance':
-        return <Label color="blue">{labelText}</Label>;
+        return <Label status={LabelStatus.info}>{labelText}</Label>;
       case 'Down':
-        return <Label color="red">{labelText}</Label>;
+        return <Label status={LabelStatus.danger}>{labelText}</Label>;
     }
   };
 
diff --git a/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx b/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx
index 54ce8db17fc..92cf88f341c 100644
--- a/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx
+++ b/packages/react-table/src/demos/examples/TableStaticBottomPagination.tsx
@@ -10,6 +10,7 @@ import {
   MenuToggle,
   MenuToggleElement,
   Label,
+  LabelStatus,
   Select,
   SelectOption,
   PaginationVariant
@@ -67,25 +68,25 @@ export const TableStaticBottomPagination: React.FunctionComponent = () => {
       case 'Running':
         return (
           <span>
-            <Label color="green">{labelText}</Label>
+            <Label status={LabelStatus.success}>{labelText}</Label>
           </span>
         );
       case 'Stopped':
         return (
           <span>
-            <Label color="orange">{labelText}</Label>
+            <Label status={LabelStatus.warning}>{labelText}</Label>
           </span>
         );
       case 'Needs Maintenance':
         return (
           <span>
-            <Label color="blue">{labelText}</Label>
+            <Label status={LabelStatus.info}>{labelText}</Label>
           </span>
         );
       case 'Down':
         return (
           <span>
-            <Label color="red">{labelText}</Label>
+            <Label status={LabelStatus.danger}>{labelText}</Label>
           </span>
         );
     }
diff --git a/packages/react-table/src/demos/examples/TableStickyHeader.tsx b/packages/react-table/src/demos/examples/TableStickyHeader.tsx
index 1bbd3df7132..f010872363a 100644
--- a/packages/react-table/src/demos/examples/TableStickyHeader.tsx
+++ b/packages/react-table/src/demos/examples/TableStickyHeader.tsx
@@ -1,4 +1,4 @@
-import { Label, PageSection } from '@patternfly/react-core';
+import { Label, LabelStatus, PageSection } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td, TableText } from '@patternfly/react-table';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
@@ -7,13 +7,13 @@ export const TableStickyHeader: React.FunctionComponent = () => {
   const renderLabel = (labelText: string) => {
     switch (labelText) {
       case 'Running':
-        return <Label color="green">{labelText}</Label>;
+        return <Label status={LabelStatus.success}>{labelText}</Label>;
       case 'Stopped':
-        return <Label color="orange">{labelText}</Label>;
+        return <Label status={LabelStatus.warning}>{labelText}</Label>;
       case 'Needs Maintenance':
-        return <Label color="blue">{labelText}</Label>;
+        return <Label status={LabelStatus.info}>{labelText}</Label>;
       case 'Down':
-        return <Label color="red">{labelText}</Label>;
+        return <Label status={LabelStatus.danger}>{labelText}</Label>;
     }
   };
 

From 8088eb3607c9a0a33394e99ebe5e5795b2cfb73f Mon Sep 17 00:00:00 2001
From: Andrew Ronaldson <aronalds@redhat.com>
Date: Thu, 23 Jul 2026 13:06:17 -0300
Subject: [PATCH 2/2] chore(notification badge): add plain variant to demos

---
 packages/react-core/src/demos/DashboardHeader.tsx               | 2 +-
 .../src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx   | 2 +-
 .../Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx       | 2 +-
 packages/react-core/src/demos/examples/Nav/NavFlyout.tsx        | 2 +-
 packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx    | 2 +-
 .../src/demos/examples/Nav/NavHorizontalWithSubnav.tsx          | 2 +-
 packages/react-core/src/demos/examples/Nav/NavManual.tsx        | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react-core/src/demos/DashboardHeader.tsx b/packages/react-core/src/demos/DashboardHeader.tsx
index 1ec4fb79936..cb32d347c16 100644
--- a/packages/react-core/src/demos/DashboardHeader.tsx
+++ b/packages/react-core/src/demos/DashboardHeader.tsx
@@ -149,7 +149,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                 <ToolbarItem>
                   <NotificationBadge
                     aria-label="Notifications"
-                    variant={NotificationBadgeVariant.read}
+                    variant={NotificationBadgeVariant.plain}
                     onClick={() => {}}
                   />
                 </ToolbarItem>
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
index 095b89cda4f..143ecf8892c 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
@@ -189,7 +189,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
index 6d08de0ca96..fb7edb16642 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -396,7 +396,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>
diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
index a3900aedfb2..1322cc4f726 100644
--- a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
@@ -134,7 +134,7 @@ export const NavFlyout: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
index 252ec706ef8..45b85292ba7 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
@@ -113,7 +113,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
index 13dbd714a9f..0b73df72193 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
@@ -161,7 +161,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
index 6d3b65c6a08..9c10bf431a9 100644
--- a/packages/react-core/src/demos/examples/Nav/NavManual.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
@@ -128,7 +128,7 @@ export const NavManual: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.plain} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>