From 3136da8e0b338dc01ef5e93922246d317029b934 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redhat.com>
Date: Fri, 10 Apr 2026 10:58:00 -0400
Subject: [PATCH 1/2] chore(Label): Added enums for LabelColor and LabelStatus

---
 .../react-core/src/components/Label/Label.tsx |  60 +++-
 .../Label/examples/LabelCompact.tsx           |  14 +-
 .../Label/examples/LabelCustomRender.tsx      |   4 +-
 .../Label/examples/LabelEditable.tsx          |   6 +-
 .../components/Label/examples/LabelFilled.tsx | 244 ++++++-------
 .../Label/examples/LabelGroupBasic.tsx        |   6 +-
 .../Label/examples/LabelGroupCategory.tsx     |   6 +-
 .../examples/LabelGroupCategoryRemovable.tsx  |   4 +-
 .../Label/examples/LabelGroupEditableAdd.tsx  |   4 +-
 .../LabelGroupEditableAddDropdown.tsx         |   4 +-
 .../examples/LabelGroupEditableAddModal.tsx   |   3 +-
 .../examples/LabelGroupEditableLabels.tsx     |  10 +-
 .../Label/examples/LabelGroupOverflow.tsx     |  12 +-
 ...GroupVerticalCategoryOverflowRemovable.tsx |   4 +-
 .../Label/examples/LabelOutline.tsx           | 324 +++++++++++-------
 15 files changed, 406 insertions(+), 299 deletions(-)

diff --git a/packages/react-core/src/components/Label/Label.tsx b/packages/react-core/src/components/Label/Label.tsx
index 71427cff802..90452034bde 100644
--- a/packages/react-core/src/components/Label/Label.tsx
+++ b/packages/react-core/src/components/Label/Label.tsx
@@ -13,17 +13,39 @@ import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-erro
 import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
+/** Semantic status for labels (default icon and status styling). */
+export enum LabelStatus {
+  success = 'success',
+  warning = 'warning',
+  danger = 'danger',
+  info = 'info',
+  custom = 'custom'
+}
+
+/** Label palette color when not using the `status` prop. */
+export enum LabelColor {
+  blue = 'blue',
+  teal = 'teal',
+  green = 'green',
+  orange = 'orange',
+  purple = 'purple',
+  red = 'red',
+  orangered = 'orangered',
+  grey = 'grey',
+  yellow = 'yellow'
+}
+
 export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** Content rendered inside the label. */
   children?: React.ReactNode;
   /** Additional classes added to the label. */
   className?: string;
   /** Color of the label. */
-  color?: 'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'yellow';
+  color?: LabelColor | 'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'yellow';
   /** Variant of the label. */
   variant?: 'outline' | 'filled' | 'overflow' | 'add';
   /** Status of the label with a respective icon and color. Overrides the color set by the color property. */
-  status?: 'success' | 'warning' | 'danger' | 'info' | 'custom';
+  status?: LabelStatus | 'success' | 'warning' | 'danger' | 'info' | 'custom';
   /** Flag indicating the label is compact. */
   isCompact?: boolean;
   /** Flag indicating the label is disabled. Works only on clickable labels, so either href or onClick props must be passed in. */
@@ -82,30 +104,30 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   }) => React.ReactNode;
 }
 
-const colorStyles = {
-  blue: styles.modifiers.blue,
-  teal: styles.modifiers.teal,
-  green: styles.modifiers.green,
-  orange: styles.modifiers.orange,
-  purple: styles.modifiers.purple,
-  red: styles.modifiers.red,
-  orangered: styles.modifiers.orangered,
-  yellow: styles.modifiers.yellow,
-  grey: ''
+const colorStyles: Record<LabelColor, string> = {
+  [LabelColor.blue]: styles.modifiers.blue,
+  [LabelColor.teal]: styles.modifiers.teal,
+  [LabelColor.green]: styles.modifiers.green,
+  [LabelColor.orange]: styles.modifiers.orange,
+  [LabelColor.purple]: styles.modifiers.purple,
+  [LabelColor.red]: styles.modifiers.red,
+  [LabelColor.orangered]: styles.modifiers.orangered,
+  [LabelColor.yellow]: styles.modifiers.yellow,
+  [LabelColor.grey]: ''
 };
 
-const statusIcons = {
-  success: <RhUiCheckCircleFillIcon />,
-  warning: <RhUiWarningFillIcon />,
-  danger: <RhUiErrorFillIcon />,
-  info: <RhUiInformationFillIcon />,
-  custom: <RhUiNotificationFillIcon />
+const statusIcons: Record<LabelStatus, React.ReactNode> = {
+  [LabelStatus.success]: <RhUiCheckCircleFillIcon />,
+  [LabelStatus.warning]: <RhUiWarningFillIcon />,
+  [LabelStatus.danger]: <RhUiErrorFillIcon />,
+  [LabelStatus.info]: <RhUiInformationFillIcon />,
+  [LabelStatus.custom]: <RhUiNotificationFillIcon />
 };
 
 export const Label: React.FunctionComponent<LabelProps> = ({
   children,
   className = '',
-  color = 'grey',
+  color = LabelColor.grey,
   variant = 'filled',
   status,
   isCompact = false,
diff --git a/packages/react-core/src/components/Label/examples/LabelCompact.tsx b/packages/react-core/src/components/Label/examples/LabelCompact.tsx
index fea1a0bdb84..de8adfe859a 100644
--- a/packages/react-core/src/components/Label/examples/LabelCompact.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelCompact.tsx
@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { Label } from '@patternfly/react-core';
+import { Label, LabelColor } from '@patternfly/react-core';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
@@ -42,24 +42,24 @@ export const LabelCompact: React.FunctionComponent = () => (
     >
       Compact clickable removable (disabled)
     </Label>
-    <Label variant="outline" color="blue" isCompact icon={<CubeIcon />}>
+    <Label variant="outline" color={LabelColor.blue} isCompact icon={<CubeIcon />}>
       Compact icon
     </Label>
-    <Label variant="outline" color="blue" isCompact onClose={() => Function.prototype}>
+    <Label variant="outline" color={LabelColor.blue} isCompact onClose={() => Function.prototype}>
       Compact removable
     </Label>
-    <Label variant="outline" color="blue" isCompact icon={<CubeIcon />} onClose={() => Function.prototype}>
+    <Label variant="outline" color={LabelColor.blue} isCompact icon={<CubeIcon />} onClose={() => Function.prototype}>
       Compact icon removable
     </Label>
-    <Label variant="outline" color="blue" isCompact href="#compact">
+    <Label variant="outline" color={LabelColor.blue} isCompact href="#compact">
       Compact link
     </Label>
-    <Label variant="outline" color="blue" isCompact href="#compact" onClose={() => Function.prototype}>
+    <Label variant="outline" color={LabelColor.blue} isCompact href="#compact" onClose={() => Function.prototype}>
       Compact link removable
     </Label>
     <Label
       variant="outline"
-      color="blue"
+      color={LabelColor.blue}
       isCompact
       icon={<CubeIcon />}
       onClose={() => Function.prototype}
diff --git a/packages/react-core/src/components/Label/examples/LabelCustomRender.tsx b/packages/react-core/src/components/Label/examples/LabelCustomRender.tsx
index 17c40b34221..abc15885b22 100644
--- a/packages/react-core/src/components/Label/examples/LabelCustomRender.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelCustomRender.tsx
@@ -1,9 +1,9 @@
-import { Label } from '@patternfly/react-core';
+import { Label, LabelColor } from '@patternfly/react-core';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelCustomRender: React.FunctionComponent = () => (
   <Label
-    color="blue"
+    color={LabelColor.blue}
     icon={<RhUiInformationFillIcon />}
     onClose={() => Function.prototype}
     render={({ className, content, componentRef }) => (
diff --git a/packages/react-core/src/components/Label/examples/LabelEditable.tsx b/packages/react-core/src/components/Label/examples/LabelEditable.tsx
index 762ff42b076..29a23a2f2b0 100644
--- a/packages/react-core/src/components/Label/examples/LabelEditable.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelEditable.tsx
@@ -1,5 +1,5 @@
 import { Fragment, useState } from 'react';
-import { Label } from '@patternfly/react-core';
+import { Label, LabelColor } from '@patternfly/react-core';
 
 export const LabelEditable: React.FunctionComponent = () => {
   const [labelText, setLabelText] = useState('Editable label');
@@ -24,7 +24,7 @@ export const LabelEditable: React.FunctionComponent = () => {
   return (
     <Fragment>
       <Label
-        color="blue"
+        color={LabelColor.blue}
         onClose={() => {}}
         closeBtnAriaLabel="Custom close button for editable label"
         onEditCancel={onEditCancel}
@@ -38,7 +38,7 @@ export const LabelEditable: React.FunctionComponent = () => {
         {labelText}
       </Label>
       <Label
-        color="grey"
+        color={LabelColor.grey}
         isCompact
         onClose={() => {}}
         closeBtnAriaLabel="Custom close button for compact editable label"
diff --git a/packages/react-core/src/components/Label/examples/LabelFilled.tsx b/packages/react-core/src/components/Label/examples/LabelFilled.tsx
index a81a3fb50dd..171f3afbe63 100644
--- a/packages/react-core/src/components/Label/examples/LabelFilled.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelFilled.tsx
@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { Label } from '@patternfly/react-core';
+import { Label, LabelColor, LabelStatus } from '@patternfly/react-core';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const LabelFilled: React.FunctionComponent = () => {
@@ -37,36 +37,36 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="blue">Blue</Label>
-      <Label color="blue" icon={<CubeIcon />}>
+      <Label color={LabelColor.blue}>Blue</Label>
+      <Label color={LabelColor.blue} icon={<CubeIcon />}>
         Blue icon
       </Label>
-      <Label color="blue" onClose={() => Function.prototype}>
+      <Label color={LabelColor.blue} onClose={() => Function.prototype}>
         Blue removable
       </Label>
-      <Label color="blue" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label color={LabelColor.blue} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Blue icon removable
       </Label>
-      <Label color="blue" href="#filled">
+      <Label color={LabelColor.blue} href="#filled">
         Blue link
       </Label>
-      <Label color="blue" href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.blue} href="#filled" onClose={() => Function.prototype}>
         Blue link removable
       </Label>{' '}
-      <Label color="blue" onClick={() => logColor('blue')}>
+      <Label color={LabelColor.blue} onClick={() => logColor('blue')}>
         Blue clickable
       </Label>
-      <Label color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
+      <Label color={LabelColor.blue} onClick={() => logColor('blue')} onClose={() => Function.prototype}>
         Blue clickable removable
       </Label>{' '}
-      <Label color="blue" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color={LabelColor.blue} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Blue label with icon that overflows
       </Label>{' '}
-      <Label color="blue" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.blue} isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
         Blue link removable (disabled)
       </Label>{' '}
       <Label
-        color="blue"
+        color={LabelColor.blue}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('blue')}
@@ -76,36 +76,36 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="green">Green</Label>
-      <Label color="green" icon={<CubeIcon />}>
+      <Label color={LabelColor.green}>Green</Label>
+      <Label color={LabelColor.green} icon={<CubeIcon />}>
         Green icon
       </Label>
-      <Label color="green" onClose={() => Function.prototype}>
+      <Label color={LabelColor.green} onClose={() => Function.prototype}>
         Green removable
       </Label>
-      <Label color="green" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label color={LabelColor.green} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Green icon removable
       </Label>
-      <Label color="green" href="#filled">
+      <Label color={LabelColor.green} href="#filled">
         Green link
       </Label>
-      <Label color="green" href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.green} href="#filled" onClose={() => Function.prototype}>
         Green link removable
       </Label>{' '}
-      <Label color="green" onClick={() => logColor('green')}>
+      <Label color={LabelColor.green} onClick={() => logColor('green')}>
         Green clickable
       </Label>
-      <Label color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
+      <Label color={LabelColor.green} onClick={() => logColor('green')} onClose={() => Function.prototype}>
         Green clickable removable
       </Label>{' '}
-      <Label color="green" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color={LabelColor.green} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Green label with icon that overflows
       </Label>{' '}
-      <Label color="green" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.green} isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
         Green link removable (disabled)
       </Label>{' '}
       <Label
-        color="green"
+        color={LabelColor.green}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('green')}
@@ -115,36 +115,36 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="orange">Orange</Label>
-      <Label color="orange" icon={<CubeIcon />}>
+      <Label color={LabelColor.orange}>Orange</Label>
+      <Label color={LabelColor.orange} icon={<CubeIcon />}>
         Orange icon
       </Label>
-      <Label color="orange" onClose={() => Function.prototype}>
+      <Label color={LabelColor.orange} onClose={() => Function.prototype}>
         Orange removable
       </Label>
-      <Label color="orange" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label color={LabelColor.orange} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Orange icon removable
       </Label>
-      <Label color="orange" href="#filled">
+      <Label color={LabelColor.orange} href="#filled">
         Orange link
       </Label>
-      <Label color="orange" href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.orange} href="#filled" onClose={() => Function.prototype}>
         Orange link removable
       </Label>{' '}
-      <Label color="orange" onClick={() => logColor('orange')}>
+      <Label color={LabelColor.orange} onClick={() => logColor('orange')}>
         Orange clickable
       </Label>
-      <Label color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
+      <Label color={LabelColor.orange} onClick={() => logColor('orange')} onClose={() => Function.prototype}>
         Orange clickable removable
       </Label>{' '}
-      <Label color="orange" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color={LabelColor.orange} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Orange label with icon that overflows
       </Label>{' '}
-      <Label color="orange" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.orange} isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
         Orange link removable (disabled)
       </Label>{' '}
       <Label
-        color="orange"
+        color={LabelColor.orange}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('orange')}
@@ -154,36 +154,36 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="red">Red</Label>
-      <Label color="red" icon={<CubeIcon />}>
+      <Label color={LabelColor.red}>Red</Label>
+      <Label color={LabelColor.red} icon={<CubeIcon />}>
         Red icon
       </Label>
-      <Label color="red" onClose={() => Function.prototype}>
+      <Label color={LabelColor.red} onClose={() => Function.prototype}>
         Red removable
       </Label>
-      <Label color="red" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label color={LabelColor.red} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Red icon removable
       </Label>
-      <Label color="red" href="#filled">
+      <Label color={LabelColor.red} href="#filled">
         Red link
       </Label>
-      <Label color="red" href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.red} href="#filled" onClose={() => Function.prototype}>
         Red link removable
       </Label>{' '}
-      <Label color="red" onClick={() => logColor('red')}>
+      <Label color={LabelColor.red} onClick={() => logColor('red')}>
         Red clickable
       </Label>
-      <Label color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
+      <Label color={LabelColor.red} onClick={() => logColor('red')} onClose={() => Function.prototype}>
         Red clickable removable
       </Label>{' '}
-      <Label color="red" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color={LabelColor.red} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Red label with icon that overflows
       </Label>{' '}
-      <Label color="red" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.red} isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
         Red link removable (disabled)
       </Label>{' '}
       <Label
-        color="red"
+        color={LabelColor.red}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('red')}
@@ -193,63 +193,63 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="orangered">Orange red</Label>
-      <Label color="orangered" icon={<CubeIcon />}>
+      <Label color={LabelColor.orangered}>Orange red</Label>
+      <Label color={LabelColor.orangered} icon={<CubeIcon />}>
         Orange red icon
       </Label>
-      <Label color="orangered" onClose={() => Function.prototype}>
+      <Label color={LabelColor.orangered} onClose={() => Function.prototype}>
         Orange red removable
       </Label>
-      <Label color="orangered" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label color={LabelColor.orangered} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Orange red icon removable
       </Label>
-      <Label color="orangered" href="#filled">
+      <Label color={LabelColor.orangered} href="#filled">
         Orange red link
       </Label>
-      <Label color="orangered" href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.orangered} href="#filled" onClose={() => Function.prototype}>
         Orange red link removable
       </Label>
-      <Label color="orangered" onClick={() => logColor('orangered')}>
+      <Label color={LabelColor.orangered} onClick={() => logColor('orangered')}>
         Orange red clickable
       </Label>
-      <Label color="orangered" onClick={() => logColor('orangered')} onClose={() => Function.prototype}>
+      <Label color={LabelColor.orangered} onClick={() => logColor('orangered')} onClose={() => Function.prototype}>
         Orange red clickable removable
       </Label>
-      <Label color="orangered" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color={LabelColor.orangered} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Orange red label with icon that overflows
       </Label>
       <br />
       <br />
-      <Label color="purple">Purple</Label>
-      <Label color="purple" icon={<CubeIcon />}>
+      <Label color={LabelColor.purple}>Purple</Label>
+      <Label color={LabelColor.purple} icon={<CubeIcon />}>
         Purple icon
       </Label>
-      <Label color="purple" onClose={() => Function.prototype}>
+      <Label color={LabelColor.purple} onClose={() => Function.prototype}>
         Purple removable
       </Label>
-      <Label color="purple" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label color={LabelColor.purple} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Purple icon removable
       </Label>
-      <Label color="purple" href="#filled">
+      <Label color={LabelColor.purple} href="#filled">
         Purple link
       </Label>
-      <Label color="purple" href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.purple} href="#filled" onClose={() => Function.prototype}>
         Purple link removable
       </Label>{' '}
-      <Label color="purple" onClick={() => logColor('purple')}>
+      <Label color={LabelColor.purple} onClick={() => logColor('purple')}>
         Purple clickable
       </Label>
-      <Label color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
+      <Label color={LabelColor.purple} onClick={() => logColor('purple')} onClose={() => Function.prototype}>
         Purple clickable removable
       </Label>{' '}
-      <Label color="purple" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color={LabelColor.purple} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Purple label with icon that overflows
       </Label>{' '}
-      <Label color="purple" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.purple} isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
         Purple link removable (disabled)
       </Label>{' '}
       <Label
-        color="purple"
+        color={LabelColor.purple}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('purple')}
@@ -259,36 +259,36 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="teal">Teal</Label>
-      <Label color="teal" icon={<CubeIcon />}>
+      <Label color={LabelColor.teal}>Teal</Label>
+      <Label color={LabelColor.teal} icon={<CubeIcon />}>
         Teal icon
       </Label>
-      <Label color="teal" onClose={() => Function.prototype}>
+      <Label color={LabelColor.teal} onClose={() => Function.prototype}>
         Teal removable
       </Label>
-      <Label color="teal" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label color={LabelColor.teal} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Teal icon removable
       </Label>
-      <Label color="teal" href="#filled">
+      <Label color={LabelColor.teal} href="#filled">
         Teal link
       </Label>
-      <Label color="teal" href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.teal} href="#filled" onClose={() => Function.prototype}>
         Teal link removable
       </Label>{' '}
-      <Label color="teal" onClick={() => logColor('teal')}>
+      <Label color={LabelColor.teal} onClick={() => logColor('teal')}>
         Teal clickable
       </Label>
-      <Label color="teal" onClick={() => logColor('teal')} onClose={() => Function.prototype}>
+      <Label color={LabelColor.teal} onClick={() => logColor('teal')} onClose={() => Function.prototype}>
         Teal clickable removable
       </Label>{' '}
-      <Label color="teal" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color={LabelColor.teal} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Teal label with icon that overflows
       </Label>{' '}
-      <Label color="teal" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.teal} isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
         Teal link removable (disabled)
       </Label>{' '}
       <Label
-        color="teal"
+        color={LabelColor.teal}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('teal')}
@@ -298,36 +298,36 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="yellow">Yellow</Label>
-      <Label color="yellow" icon={<CubeIcon />}>
+      <Label color={LabelColor.yellow}>Yellow</Label>
+      <Label color={LabelColor.yellow} icon={<CubeIcon />}>
         Yellow icon
       </Label>
-      <Label color="yellow" onClose={() => Function.prototype}>
+      <Label color={LabelColor.yellow} onClose={() => Function.prototype}>
         Yellow removable
       </Label>
-      <Label color="yellow" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label color={LabelColor.yellow} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Yellow icon removable
       </Label>
-      <Label color="yellow" href="#filled">
+      <Label color={LabelColor.yellow} href="#filled">
         Yellow link
       </Label>
-      <Label color="yellow" href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.yellow} href="#filled" onClose={() => Function.prototype}>
         Yellow link removable
       </Label>{' '}
-      <Label color="yellow" onClick={() => logColor('yellow')}>
+      <Label color={LabelColor.yellow} onClick={() => logColor('yellow')}>
         Yellow clickable
       </Label>
-      <Label color="yellow" onClick={() => logColor('yellow')} onClose={() => Function.prototype}>
+      <Label color={LabelColor.yellow} onClick={() => logColor('yellow')} onClose={() => Function.prototype}>
         Yellow clickable removable
       </Label>{' '}
-      <Label color="yellow" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color={LabelColor.yellow} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Yellow label with icon that overflows
       </Label>{' '}
-      <Label color="yellow" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.yellow} isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
         Yellow link removable (disabled)
       </Label>{' '}
       <Label
-        color="yellow"
+        color={LabelColor.yellow}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('yellow')}
@@ -344,107 +344,107 @@ export const LabelFilled: React.FunctionComponent = () => {
       <strong>Status:</strong>
       <br />
       <br />
-      <Label status="success">Success</Label>
-      <Label status="success" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.success}>Success</Label>
+      <Label status={LabelStatus.success} onClose={() => Function.prototype}>
         Success removable
       </Label>
-      <Label status="success" href="#filled">
+      <Label status={LabelStatus.success} href="#filled">
         Success link
       </Label>
-      <Label status="success" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.success} href="#filled" onClose={() => Function.prototype}>
         Success link removable
       </Label>
-      <Label status="success" onClick={() => logColor('success')}>
+      <Label status={LabelStatus.success} onClick={() => logColor('success')}>
         Success clickable
       </Label>
-      <Label status="success" onClick={() => logColor('success')} onClose={() => Function.prototype}>
+      <Label status={LabelStatus.success} onClick={() => logColor('success')} onClose={() => Function.prototype}>
         Success clickable removable
       </Label>
-      <Label status="success" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.success} onClose={() => Function.prototype} textMaxWidth="16ch">
         Success label with text that overflows
       </Label>
       <br />
       <br />
-      <Label status="warning">Warning</Label>
-      <Label status="warning" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.warning}>Warning</Label>
+      <Label status={LabelStatus.warning} onClose={() => Function.prototype}>
         Warning removable
       </Label>
-      <Label status="warning" href="#filled">
+      <Label status={LabelStatus.warning} href="#filled">
         Warning link
       </Label>
-      <Label status="warning" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.warning} href="#filled" onClose={() => Function.prototype}>
         Warning link removable
       </Label>
-      <Label status="warning" onClick={() => logColor('warning')}>
+      <Label status={LabelStatus.warning} onClick={() => logColor('warning')}>
         Warning clickable
       </Label>
-      <Label status="warning" onClick={() => logColor('warning')} onClose={() => Function.prototype}>
+      <Label status={LabelStatus.warning} onClick={() => logColor('warning')} onClose={() => Function.prototype}>
         Warning clickable removable
       </Label>
-      <Label status="warning" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.warning} onClose={() => Function.prototype} textMaxWidth="16ch">
         Warning label with text that overflows
       </Label>
       <br />
       <br />
-      <Label status="danger">Danger</Label>
-      <Label status="danger" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.danger}>Danger</Label>
+      <Label status={LabelStatus.danger} onClose={() => Function.prototype}>
         Danger removable
       </Label>
-      <Label status="danger" href="#filled">
+      <Label status={LabelStatus.danger} href="#filled">
         Danger link
       </Label>
-      <Label status="danger" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.danger} href="#filled" onClose={() => Function.prototype}>
         Danger link removable
       </Label>
-      <Label status="danger" onClick={() => logColor('danger')}>
+      <Label status={LabelStatus.danger} onClick={() => logColor('danger')}>
         Danger clickable
       </Label>
-      <Label status="danger" onClick={() => logColor('danger')} onClose={() => Function.prototype}>
+      <Label status={LabelStatus.danger} onClick={() => logColor('danger')} onClose={() => Function.prototype}>
         Danger clickable removable
       </Label>
-      <Label status="danger" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.danger} onClose={() => Function.prototype} textMaxWidth="16ch">
         Danger label with text that overflows
       </Label>
       <br />
       <br />
-      <Label status="info">Info</Label>
-      <Label status="info" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.info}>Info</Label>
+      <Label status={LabelStatus.info} onClose={() => Function.prototype}>
         Info removable
       </Label>
-      <Label status="info" href="#filled">
+      <Label status={LabelStatus.info} href="#filled">
         Info link
       </Label>
-      <Label status="info" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.info} href="#filled" onClose={() => Function.prototype}>
         Info link removable
       </Label>
-      <Label status="info" onClick={() => logColor('info')}>
+      <Label status={LabelStatus.info} onClick={() => logColor('info')}>
         Info clickable
       </Label>
-      <Label status="info" onClick={() => logColor('info')} onClose={() => Function.prototype}>
+      <Label status={LabelStatus.info} onClick={() => logColor('info')} onClose={() => Function.prototype}>
         Info clickable removable
       </Label>
-      <Label status="info" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.info} onClose={() => Function.prototype} textMaxWidth="16ch">
         Info label with text that overflows
       </Label>
       <br />
       <br />
-      <Label status="custom">Custom</Label>
-      <Label status="custom" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.custom}>Custom</Label>
+      <Label status={LabelStatus.custom} onClose={() => Function.prototype}>
         Custom removable
       </Label>
-      <Label status="custom" href="#filled">
+      <Label status={LabelStatus.custom} href="#filled">
         Custom link
       </Label>
-      <Label status="custom" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.custom} href="#filled" onClose={() => Function.prototype}>
         Custom link removable
       </Label>
-      <Label status="custom" onClick={() => logColor('custom')}>
+      <Label status={LabelStatus.custom} onClick={() => logColor('custom')}>
         Custom clickable
       </Label>
-      <Label status="custom" onClick={() => logColor('custom')} onClose={() => Function.prototype}>
+      <Label status={LabelStatus.custom} onClick={() => logColor('custom')} onClose={() => Function.prototype}>
         Custom clickable removable
       </Label>
-      <Label status="custom" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.custom} onClose={() => Function.prototype} textMaxWidth="16ch">
         Custom label with text that overflows
       </Label>
     </Fragment>
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupBasic.tsx b/packages/react-core/src/components/Label/examples/LabelGroupBasic.tsx
index bcfc8b79621..ebe2c07ac68 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupBasic.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupBasic.tsx
@@ -1,13 +1,13 @@
-import { Label, LabelGroup } from '@patternfly/react-core';
+import { Label, LabelColor, LabelGroup } from '@patternfly/react-core';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelGroupBasic: React.FunctionComponent = () => (
   <LabelGroup>
     <Label icon={<RhUiInformationFillIcon />}>Label 1</Label>
-    <Label icon={<RhUiInformationFillIcon />} color="blue">
+    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.blue}>
       Label 2
     </Label>
-    <Label icon={<RhUiInformationFillIcon />} color="green">
+    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.green}>
       Label 3
     </Label>
   </LabelGroup>
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupCategory.tsx b/packages/react-core/src/components/Label/examples/LabelGroupCategory.tsx
index 492197318f4..152e115693b 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupCategory.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupCategory.tsx
@@ -1,13 +1,13 @@
-import { Label, LabelGroup } from '@patternfly/react-core';
+import { Label, LabelColor, LabelGroup } from '@patternfly/react-core';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelGroupCategory: React.FunctionComponent = () => (
   <LabelGroup categoryName="Group label">
     <Label icon={<RhUiInformationFillIcon />}>Label 1</Label>
-    <Label icon={<RhUiInformationFillIcon />} color="blue">
+    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.blue}>
       Label 2
     </Label>
-    <Label icon={<RhUiInformationFillIcon />} color="green">
+    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.green}>
       Label 3
     </Label>
   </LabelGroup>
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupCategoryRemovable.tsx b/packages/react-core/src/components/Label/examples/LabelGroupCategoryRemovable.tsx
index 95fdcdf1839..b61d9a1402d 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupCategoryRemovable.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupCategoryRemovable.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
+import { Label, LabelColor, LabelGroup } from '@patternfly/react-core';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelGroupCategoryRemovable: React.FunctionComponent = () => {
@@ -15,7 +15,7 @@ export const LabelGroupCategoryRemovable: React.FunctionComponent = () => {
   return (
     <LabelGroup categoryName="Group label" isClosable onClick={deleteCategory}>
       {labels.map(([labelText, labelColor]) => (
-        <Label icon={<RhUiInformationFillIcon />} color={labelColor as LabelProps['color']} key={labelText}>
+        <Label icon={<RhUiInformationFillIcon />} color={labelColor as LabelColor} key={labelText}>
           {labelText}
         </Label>
       ))}
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupEditableAdd.tsx b/packages/react-core/src/components/Label/examples/LabelGroupEditableAdd.tsx
index 99ee3b6e653..c38b4ef304d 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupEditableAdd.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupEditableAdd.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { LabelGroup, Label } from '@patternfly/react-core';
+import { LabelGroup, Label, LabelColor } from '@patternfly/react-core';
 
 export const LabelGroupEditableAdd: React.FunctionComponent = () => {
   const [idIndex, setIdIndex] = useState<number>(3);
@@ -65,7 +65,7 @@ export const LabelGroupEditableAdd: React.FunctionComponent = () => {
         <Label
           key={label.id}
           id={label.id}
-          color="blue"
+          color={LabelColor.blue}
           onClose={() => onClose(label.id)}
           onEditCancel={(_event, prevText) => onEdit(prevText, index)}
           onEditComplete={(_event, newText) => onEdit(newText, index)}
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx b/packages/react-core/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx
index 51d1d78b976..a77620bd829 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { LabelGroup, Label, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
+import { LabelGroup, Label, LabelColor, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
 
 export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
   const toggleRef = useRef<HTMLDivElement>(undefined);
@@ -122,7 +122,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
           <Label
             key={label.id}
             id={label.id}
-            color="blue"
+            color={LabelColor.blue}
             onClose={() => onClose(label.id)}
             onEditCancel={(_event, prevText) => onEdit(prevText, index)}
             onEditComplete={(_event, newText) => onEdit(newText, index)}
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx b/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx
index 733f001bd6a..1ecf2cd5091 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import {
   LabelGroup,
   Label,
+  LabelColor,
   Button,
   Form,
   FormGroup,
@@ -244,7 +245,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
           <Label
             key={label.id}
             id={label.id}
-            color="blue"
+            color={LabelColor.blue}
             onClose={() => onClose(label.id)}
             onEditCancel={(_event, prevText) => onEdit(prevText, index)}
             onEditComplete={(_event, newText) => onEdit(newText, index)}
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupEditableLabels.tsx b/packages/react-core/src/components/Label/examples/LabelGroupEditableLabels.tsx
index de97126c99a..75491b2c234 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupEditableLabels.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupEditableLabels.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { LabelGroup, Label } from '@patternfly/react-core';
+import { LabelGroup, Label, LabelColor } from '@patternfly/react-core';
 
 export const LabelGroupEditableLabels: React.FunctionComponent = () => {
   const [label1, setLabel1] = useState('Editable label');
@@ -9,7 +9,7 @@ export const LabelGroupEditableLabels: React.FunctionComponent = () => {
   return (
     <LabelGroup numLabels={5} isEditable>
       <Label
-        color="blue"
+        color={LabelColor.blue}
         onClose={() => Function.prototype}
         onEditCancel={(_event, prevText) => setLabel1(prevText)}
         onEditComplete={(_event, newText) => setLabel1(newText)}
@@ -21,9 +21,9 @@ export const LabelGroupEditableLabels: React.FunctionComponent = () => {
       >
         {label1}
       </Label>
-      <Label color="green">Static label</Label>
+      <Label color={LabelColor.green}>Static label</Label>
       <Label
-        color="blue"
+        color={LabelColor.blue}
         onClose={() => Function.prototype}
         onEditCancel={(_event, prevText) => setLabel2(prevText)}
         onEditComplete={(_event, newText) => setLabel2(newText)}
@@ -36,7 +36,7 @@ export const LabelGroupEditableLabels: React.FunctionComponent = () => {
         {label2}
       </Label>
       <Label
-        color="blue"
+        color={LabelColor.blue}
         onClose={() => Function.prototype}
         onEditCancel={(_event, prevText) => setLabel3(prevText)}
         onEditComplete={(_event, newText) => setLabel3(newText)}
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupOverflow.tsx b/packages/react-core/src/components/Label/examples/LabelGroupOverflow.tsx
index 2283002c001..38507a54851 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupOverflow.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupOverflow.tsx
@@ -1,22 +1,22 @@
-import { Label, LabelGroup } from '@patternfly/react-core';
+import { Label, LabelColor, LabelGroup } from '@patternfly/react-core';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelGroupOverflow: React.FunctionComponent = () => (
   <LabelGroup>
     <Label icon={<RhUiInformationFillIcon />}>Label 1</Label>
-    <Label icon={<RhUiInformationFillIcon />} color="blue">
+    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.blue}>
       Label 2
     </Label>
-    <Label icon={<RhUiInformationFillIcon />} color="green">
+    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.green}>
       Label 3
     </Label>
-    <Label icon={<RhUiInformationFillIcon />} color="orange">
+    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.orange}>
       Label 4
     </Label>
-    <Label icon={<RhUiInformationFillIcon />} color="red">
+    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.red}>
       Label 5
     </Label>
-    <Label icon={<RhUiInformationFillIcon />} color="purple">
+    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.purple}>
       Label 6
     </Label>
   </LabelGroup>
diff --git a/packages/react-core/src/components/Label/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx b/packages/react-core/src/components/Label/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx
index f0baa5cb2d6..49c0960861f 100644
--- a/packages/react-core/src/components/Label/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
+import { Label, LabelColor, LabelGroup } from '@patternfly/react-core';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelGroupVerticalCategoryOverflowRemovable: React.FunctionComponent = () => {
@@ -15,7 +15,7 @@ export const LabelGroupVerticalCategoryOverflowRemovable: React.FunctionComponen
   return (
     <LabelGroup categoryName="Group label with a very long name" isVertical isClosable onClick={deleteCategory}>
       {labels.map(([labelText, labelColor]) => (
-        <Label icon={<RhUiInformationFillIcon />} color={labelColor as LabelProps['color']} key={labelText}>
+        <Label icon={<RhUiInformationFillIcon />} color={labelColor as LabelColor} key={labelText}>
           {labelText}
         </Label>
       ))}
diff --git a/packages/react-core/src/components/Label/examples/LabelOutline.tsx b/packages/react-core/src/components/Label/examples/LabelOutline.tsx
index 54fac5111d3..32bbc9c3294 100644
--- a/packages/react-core/src/components/Label/examples/LabelOutline.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelOutline.tsx
@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { Label } from '@patternfly/react-core';
+import { Label, LabelColor, LabelStatus } from '@patternfly/react-core';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const LabelOutline: React.FunctionComponent = () => {
@@ -51,36 +51,47 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="blue">
+      <Label variant="outline" color={LabelColor.blue}>
         Blue
       </Label>
-      <Label variant="outline" color="blue" icon={<CubeIcon />}>
+      <Label variant="outline" color={LabelColor.blue} icon={<CubeIcon />}>
         Blue icon
       </Label>
-      <Label variant="outline" color="blue" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.blue} onClose={() => Function.prototype}>
         Blue removable
       </Label>
-      <Label variant="outline" color="blue" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.blue} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Blue icon removable
       </Label>
-      <Label variant="outline" color="blue" href="#outline">
+      <Label variant="outline" color={LabelColor.blue} href="#outline">
         Blue link
       </Label>
-      <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.blue} href="#outline" onClose={() => Function.prototype}>
         Blue link removable
       </Label>{' '}
-      <Label variant="outline" color="blue" onClick={() => logColor('blue')}>
+      <Label variant="outline" color={LabelColor.blue} onClick={() => logColor('blue')}>
         Blue clickable
       </Label>
-      <Label variant="outline" color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
+      <Label
+        variant="outline"
+        color={LabelColor.blue}
+        onClick={() => logColor('blue')}
+        onClose={() => Function.prototype}
+      >
         Blue clickable removable
       </Label>
-      <Label variant="outline" color="blue" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label
+        variant="outline"
+        color={LabelColor.blue}
+        icon={<CubeIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
         Blue label with icon that overflows
       </Label>{' '}
       <Label
         variant="outline"
-        color="blue"
+        color={LabelColor.blue}
         isDisabled
         icon={<CubeIcon />}
         href="#filled"
@@ -90,7 +101,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="blue"
+        color={LabelColor.blue}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('blue')}
@@ -100,36 +111,47 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="green">
+      <Label variant="outline" color={LabelColor.green}>
         Green
       </Label>
-      <Label variant="outline" color="green" icon={<CubeIcon />}>
+      <Label variant="outline" color={LabelColor.green} icon={<CubeIcon />}>
         Green icon
       </Label>
-      <Label variant="outline" color="green" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.green} onClose={() => Function.prototype}>
         Green removable
       </Label>
-      <Label variant="outline" color="green" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.green} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Green icon removable
       </Label>
-      <Label variant="outline" color="green" href="#outline">
+      <Label variant="outline" color={LabelColor.green} href="#outline">
         Green link
       </Label>
-      <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.green} href="#outline" onClose={() => Function.prototype}>
         Green link removable
       </Label>{' '}
-      <Label variant="outline" color="green" onClick={() => logColor('green')}>
+      <Label variant="outline" color={LabelColor.green} onClick={() => logColor('green')}>
         Green clickable
       </Label>
-      <Label variant="outline" color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
+      <Label
+        variant="outline"
+        color={LabelColor.green}
+        onClick={() => logColor('green')}
+        onClose={() => Function.prototype}
+      >
         Green clickable removable
       </Label>
-      <Label variant="outline" color="green" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label
+        variant="outline"
+        color={LabelColor.green}
+        icon={<CubeIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
         Green label with icon that overflows
       </Label>{' '}
       <Label
         variant="outline"
-        color="green"
+        color={LabelColor.green}
         isDisabled
         icon={<CubeIcon />}
         href="#filled"
@@ -139,7 +161,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="green"
+        color={LabelColor.green}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('green')}
@@ -149,33 +171,38 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="orange">
+      <Label variant="outline" color={LabelColor.orange}>
         Orange
       </Label>
-      <Label variant="outline" color="orange" icon={<CubeIcon />}>
+      <Label variant="outline" color={LabelColor.orange} icon={<CubeIcon />}>
         Orange icon
       </Label>
-      <Label variant="outline" color="orange" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.orange} onClose={() => Function.prototype}>
         Orange removable
       </Label>
-      <Label variant="outline" color="orange" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.orange} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Orange icon removable
       </Label>
-      <Label variant="outline" color="orange" href="#outline">
+      <Label variant="outline" color={LabelColor.orange} href="#outline">
         Orange link
       </Label>
-      <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.orange} href="#outline" onClose={() => Function.prototype}>
         Orange link removable
       </Label>{' '}
-      <Label variant="outline" color="orange" onClick={() => logColor('orange')}>
+      <Label variant="outline" color={LabelColor.orange} onClick={() => logColor('orange')}>
         Orange clickable
       </Label>
-      <Label variant="outline" color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
+      <Label
+        variant="outline"
+        color={LabelColor.orange}
+        onClick={() => logColor('orange')}
+        onClose={() => Function.prototype}
+      >
         Orange clickable removable
       </Label>{' '}
       <Label
         variant="outline"
-        color="orange"
+        color={LabelColor.orange}
         icon={<CubeIcon />}
         onClose={() => Function.prototype}
         textMaxWidth="16ch"
@@ -184,7 +211,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="orange"
+        color={LabelColor.orange}
         isDisabled
         icon={<CubeIcon />}
         href="#filled"
@@ -194,7 +221,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="orange"
+        color={LabelColor.orange}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('orange')}
@@ -204,59 +231,70 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="red">
+      <Label variant="outline" color={LabelColor.red}>
         Red
       </Label>
-      <Label variant="outline" color="red" icon={<CubeIcon />}>
+      <Label variant="outline" color={LabelColor.red} icon={<CubeIcon />}>
         Red icon
       </Label>
-      <Label variant="outline" color="red" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.red} onClose={() => Function.prototype}>
         Red removable
       </Label>
-      <Label variant="outline" color="red" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.red} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Red icon removable
       </Label>
-      <Label variant="outline" color="red" href="#outline">
+      <Label variant="outline" color={LabelColor.red} href="#outline">
         Red link
       </Label>
-      <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.red} href="#outline" onClose={() => Function.prototype}>
         Red link removable
       </Label>{' '}
-      <Label variant="outline" color="red" onClick={() => logColor('red')}>
+      <Label variant="outline" color={LabelColor.red} onClick={() => logColor('red')}>
         Red clickable
       </Label>
-      <Label variant="outline" color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
+      <Label
+        variant="outline"
+        color={LabelColor.red}
+        onClick={() => logColor('red')}
+        onClose={() => Function.prototype}
+      >
         Red clickable removable
       </Label>
-      <Label variant="outline" color="red" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label
+        variant="outline"
+        color={LabelColor.red}
+        icon={<CubeIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
         Red label with icon that overflows
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="orangered">
+      <Label variant="outline" color={LabelColor.orangered}>
         Orange red
       </Label>
-      <Label variant="outline" color="orangered" icon={<CubeIcon />}>
+      <Label variant="outline" color={LabelColor.orangered} icon={<CubeIcon />}>
         Orange red icon
       </Label>
-      <Label variant="outline" color="orangered" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.orangered} onClose={() => Function.prototype}>
         Orange red removable
       </Label>
-      <Label variant="outline" color="orangered" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.orangered} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Orange red icon removable
       </Label>
-      <Label variant="outline" color="orangered" href="#outline">
+      <Label variant="outline" color={LabelColor.orangered} href="#outline">
         Orange red link
       </Label>
-      <Label variant="outline" color="orangered" href="#outline" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.orangered} href="#outline" onClose={() => Function.prototype}>
         Orange red link removable
       </Label>
-      <Label variant="outline" color="orangered" onClick={() => logColor('orangered')}>
+      <Label variant="outline" color={LabelColor.orangered} onClick={() => logColor('orangered')}>
         Orange red clickable
       </Label>
       <Label
         variant="outline"
-        color="orangered"
+        color={LabelColor.orangered}
         onClick={() => logColor('orangered')}
         onClose={() => Function.prototype}
       >
@@ -264,7 +302,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <Label
         variant="outline"
-        color="orangered"
+        color={LabelColor.orangered}
         icon={<CubeIcon />}
         onClose={() => Function.prototype}
         textMaxWidth="16ch"
@@ -273,33 +311,38 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="purple">
+      <Label variant="outline" color={LabelColor.purple}>
         Purple
       </Label>
-      <Label variant="outline" color="purple" icon={<CubeIcon />}>
+      <Label variant="outline" color={LabelColor.purple} icon={<CubeIcon />}>
         Purple icon
       </Label>
-      <Label variant="outline" color="purple" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.purple} onClose={() => Function.prototype}>
         Purple removable
       </Label>
-      <Label variant="outline" color="purple" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.purple} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Purple icon removable
       </Label>
-      <Label variant="outline" color="purple" href="#outline">
+      <Label variant="outline" color={LabelColor.purple} href="#outline">
         Purple link
       </Label>
-      <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.purple} href="#outline" onClose={() => Function.prototype}>
         Purple link removable
       </Label>{' '}
-      <Label variant="outline" color="purple" onClick={() => logColor('purple')}>
+      <Label variant="outline" color={LabelColor.purple} onClick={() => logColor('purple')}>
         Purple clickable
       </Label>
-      <Label variant="outline" color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
+      <Label
+        variant="outline"
+        color={LabelColor.purple}
+        onClick={() => logColor('purple')}
+        onClose={() => Function.prototype}
+      >
         Purple clickable removable
       </Label>{' '}
       <Label
         variant="outline"
-        color="purple"
+        color={LabelColor.purple}
         icon={<CubeIcon />}
         onClose={() => Function.prototype}
         textMaxWidth="16ch"
@@ -308,7 +351,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="purple"
+        color={LabelColor.purple}
         isDisabled
         icon={<CubeIcon />}
         href="#filled"
@@ -318,7 +361,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="purple"
+        color={LabelColor.purple}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('purple')}
@@ -328,36 +371,47 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="teal">
+      <Label variant="outline" color={LabelColor.teal}>
         Teal
       </Label>
-      <Label variant="outline" color="teal" icon={<CubeIcon />}>
+      <Label variant="outline" color={LabelColor.teal} icon={<CubeIcon />}>
         Teal icon
       </Label>
-      <Label variant="outline" color="teal" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.teal} onClose={() => Function.prototype}>
         Teal removable
       </Label>
-      <Label variant="outline" color="teal" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.teal} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Teal icon removable
       </Label>
-      <Label variant="outline" color="teal" href="#outline">
+      <Label variant="outline" color={LabelColor.teal} href="#outline">
         Teal link
       </Label>
-      <Label variant="outline" color="teal" href="#outline" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.teal} href="#outline" onClose={() => Function.prototype}>
         Teal link removable
       </Label>{' '}
-      <Label variant="outline" color="teal" onClick={() => logColor('teal')}>
+      <Label variant="outline" color={LabelColor.teal} onClick={() => logColor('teal')}>
         Teal clickable
       </Label>
-      <Label variant="outline" color="teal" onClick={() => logColor('teal')} onClose={() => Function.prototype}>
+      <Label
+        variant="outline"
+        color={LabelColor.teal}
+        onClick={() => logColor('teal')}
+        onClose={() => Function.prototype}
+      >
         Teal clickable removable
       </Label>
-      <Label variant="outline" color="teal" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label
+        variant="outline"
+        color={LabelColor.teal}
+        icon={<CubeIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
         Teal label with icon that overflows
       </Label>{' '}
       <Label
         variant="outline"
-        color="teal"
+        color={LabelColor.teal}
         isDisabled
         icon={<CubeIcon />}
         href="#filled"
@@ -367,7 +421,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="teal"
+        color={LabelColor.teal}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('teal')}
@@ -377,33 +431,38 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label variant="outline" color="yellow">
+      <Label variant="outline" color={LabelColor.yellow}>
         Yellow
       </Label>
-      <Label variant="outline" color="yellow" icon={<CubeIcon />}>
+      <Label variant="outline" color={LabelColor.yellow} icon={<CubeIcon />}>
         Yellow icon
       </Label>
-      <Label variant="outline" color="yellow" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.yellow} onClose={() => Function.prototype}>
         Yellow removable
       </Label>
-      <Label variant="outline" color="yellow" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.yellow} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Yellow icon removable
       </Label>
-      <Label variant="outline" color="yellow" href="#outline">
+      <Label variant="outline" color={LabelColor.yellow} href="#outline">
         Yellow link
       </Label>
-      <Label variant="outline" color="yellow" href="#outline" onClose={() => Function.prototype}>
+      <Label variant="outline" color={LabelColor.yellow} href="#outline" onClose={() => Function.prototype}>
         Yellow link removable
       </Label>{' '}
-      <Label variant="outline" color="yellow" onClick={() => logColor('yellow')}>
+      <Label variant="outline" color={LabelColor.yellow} onClick={() => logColor('yellow')}>
         Yellow clickable
       </Label>
-      <Label variant="outline" color="yellow" onClick={() => logColor('yellow')} onClose={() => Function.prototype}>
+      <Label
+        variant="outline"
+        color={LabelColor.yellow}
+        onClick={() => logColor('yellow')}
+        onClose={() => Function.prototype}
+      >
         Yellow clickable removable
       </Label>
       <Label
         variant="outline"
-        color="yellow"
+        color={LabelColor.yellow}
         icon={<CubeIcon />}
         onClose={() => Function.prototype}
         textMaxWidth="16ch"
@@ -412,7 +471,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="yellow"
+        color={LabelColor.yellow}
         isDisabled
         icon={<CubeIcon />}
         href="#filled"
@@ -422,7 +481,7 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label
         variant="outline"
-        color="yellow"
+        color={LabelColor.yellow}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('yellow')}
@@ -435,117 +494,142 @@ export const LabelOutline: React.FunctionComponent = () => {
       <strong>Status:</strong>
       <br />
       <br />
-      <Label status="success" variant="outline">
+      <Label status={LabelStatus.success} variant="outline">
         Success
       </Label>
-      <Label status="success" variant="outline" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.success} variant="outline" onClose={() => Function.prototype}>
         Success removable
       </Label>
-      <Label status="success" variant="outline" href="#filled">
+      <Label status={LabelStatus.success} variant="outline" href="#filled">
         Success link
       </Label>
-      <Label status="success" variant="outline" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.success} variant="outline" href="#filled" onClose={() => Function.prototype}>
         Success link removable
       </Label>
-      <Label status="success" variant="outline" onClick={() => logColor('success')}>
+      <Label status={LabelStatus.success} variant="outline" onClick={() => logColor('success')}>
         Success clickable
       </Label>
-      <Label status="success" variant="outline" onClick={() => logColor('success')} onClose={() => Function.prototype}>
+      <Label
+        status={LabelStatus.success}
+        variant="outline"
+        onClick={() => logColor('success')}
+        onClose={() => Function.prototype}
+      >
         Success clickable removable
       </Label>
-      <Label status="success" variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.success} variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
         Success label with text that overflows
       </Label>
       <br />
       <br />
-      <Label status="warning" variant="outline">
+      <Label status={LabelStatus.warning} variant="outline">
         Warning
       </Label>
-      <Label status="warning" variant="outline" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.warning} variant="outline" onClose={() => Function.prototype}>
         Warning removable
       </Label>
-      <Label status="warning" variant="outline" href="#filled">
+      <Label status={LabelStatus.warning} variant="outline" href="#filled">
         Warning link
       </Label>
-      <Label status="warning" variant="outline" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.warning} variant="outline" href="#filled" onClose={() => Function.prototype}>
         Warning link removable
       </Label>
-      <Label status="warning" variant="outline" onClick={() => logColor('warning')}>
+      <Label status={LabelStatus.warning} variant="outline" onClick={() => logColor('warning')}>
         Warning clickable
       </Label>
-      <Label status="warning" variant="outline" onClick={() => logColor('warning')} onClose={() => Function.prototype}>
+      <Label
+        status={LabelStatus.warning}
+        variant="outline"
+        onClick={() => logColor('warning')}
+        onClose={() => Function.prototype}
+      >
         Warning clickable removable
       </Label>
-      <Label status="warning" variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.warning} variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
         Warning label with text that overflows
       </Label>
       <br />
       <br />
-      <Label status="danger" variant="outline">
+      <Label status={LabelStatus.danger} variant="outline">
         Danger
       </Label>
-      <Label status="danger" variant="outline" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.danger} variant="outline" onClose={() => Function.prototype}>
         Danger removable
       </Label>
-      <Label status="danger" variant="outline" href="#filled">
+      <Label status={LabelStatus.danger} variant="outline" href="#filled">
         Danger link
       </Label>
-      <Label status="danger" variant="outline" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.danger} variant="outline" href="#filled" onClose={() => Function.prototype}>
         Danger link removable
       </Label>
-      <Label status="danger" variant="outline" onClick={() => logColor('danger')}>
+      <Label status={LabelStatus.danger} variant="outline" onClick={() => logColor('danger')}>
         Danger clickable
       </Label>
-      <Label status="danger" variant="outline" onClick={() => logColor('danger')} onClose={() => Function.prototype}>
+      <Label
+        status={LabelStatus.danger}
+        variant="outline"
+        onClick={() => logColor('danger')}
+        onClose={() => Function.prototype}
+      >
         Danger clickable removable
       </Label>
-      <Label status="danger" variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.danger} variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
         Danger label with text that overflows
       </Label>
       <br />
       <br />
-      <Label status="info" variant="outline">
+      <Label status={LabelStatus.info} variant="outline">
         Info
       </Label>
-      <Label status="info" variant="outline" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.info} variant="outline" onClose={() => Function.prototype}>
         Info removable
       </Label>
-      <Label status="info" variant="outline" href="#filled">
+      <Label status={LabelStatus.info} variant="outline" href="#filled">
         Info link
       </Label>
-      <Label status="info" variant="outline" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.info} variant="outline" href="#filled" onClose={() => Function.prototype}>
         Info link removable
       </Label>
-      <Label status="info" variant="outline" onClick={() => logColor('info')}>
+      <Label status={LabelStatus.info} variant="outline" onClick={() => logColor('info')}>
         Info clickable
       </Label>
-      <Label status="info" variant="outline" onClick={() => logColor('info')} onClose={() => Function.prototype}>
+      <Label
+        status={LabelStatus.info}
+        variant="outline"
+        onClick={() => logColor('info')}
+        onClose={() => Function.prototype}
+      >
         Info clickable removable
       </Label>
-      <Label status="info" variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.info} variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
         Info label with text that overflows
       </Label>
       <br />
       <br />
-      <Label status="custom" variant="outline">
+      <Label status={LabelStatus.custom} variant="outline">
         Custom
       </Label>
-      <Label status="custom" variant="outline" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.custom} variant="outline" onClose={() => Function.prototype}>
         Custom removable
       </Label>
-      <Label status="custom" variant="outline" href="#filled">
+      <Label status={LabelStatus.custom} variant="outline" href="#filled">
         Custom link
       </Label>
-      <Label status="custom" variant="outline" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.custom} variant="outline" href="#filled" onClose={() => Function.prototype}>
         Custom link removable
       </Label>
-      <Label status="custom" variant="outline" onClick={() => logColor('custom')}>
+      <Label status={LabelStatus.custom} variant="outline" onClick={() => logColor('custom')}>
         Custom clickable
       </Label>
-      <Label status="custom" variant="outline" onClick={() => logColor('custom')} onClose={() => Function.prototype}>
+      <Label
+        status={LabelStatus.custom}
+        variant="outline"
+        onClick={() => logColor('custom')}
+        onClose={() => Function.prototype}
+      >
         Custom clickable removable
       </Label>
-      <Label status="custom" variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.custom} variant="outline" onClose={() => Function.prototype} textMaxWidth="16ch">
         Custom label with text that overflows
       </Label>
     </Fragment>

From 12e0182276593e2eaa991f1c04c3f66229da6d47 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redhat.com>
Date: Fri, 10 Apr 2026 13:13:41 -0400
Subject: [PATCH 2/2] fix type

---
 packages/react-core/src/components/Label/Label.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/Label/Label.tsx b/packages/react-core/src/components/Label/Label.tsx
index 90452034bde..b2569d84490 100644
--- a/packages/react-core/src/components/Label/Label.tsx
+++ b/packages/react-core/src/components/Label/Label.tsx
@@ -41,11 +41,11 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** Additional classes added to the label. */
   className?: string;
   /** Color of the label. */
-  color?: LabelColor | 'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'yellow';
+  color?: 'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'yellow';
   /** Variant of the label. */
   variant?: 'outline' | 'filled' | 'overflow' | 'add';
   /** Status of the label with a respective icon and color. Overrides the color set by the color property. */
-  status?: LabelStatus | 'success' | 'warning' | 'danger' | 'info' | 'custom';
+  status?: 'success' | 'warning' | 'danger' | 'info' | 'custom';
   /** Flag indicating the label is compact. */
   isCompact?: boolean;
   /** Flag indicating the label is disabled. Works only on clickable labels, so either href or onClick props must be passed in. */