From e29d5f365201a025f407528effe91221c71a3530 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 13 Jun 2022 12:01:26 -0400
Subject: [PATCH] convert label demos to TS

---
 .../src/components/Label/examples/Label.md    | 404 +-----------------
 .../Label/examples/LabelCompact.tsx           |  27 ++
 .../components/Label/examples/LabelFilled.tsx | 167 ++++++++
 .../Label/examples/LabelOutline.tsx           | 188 ++++++++
 .../Label/examples/LabelRouterLink.tsx        |  20 +
 5 files changed, 407 insertions(+), 399 deletions(-)
 create mode 100644 packages/react-core/src/components/Label/examples/LabelCompact.tsx
 create mode 100644 packages/react-core/src/components/Label/examples/LabelFilled.tsx
 create mode 100644 packages/react-core/src/components/Label/examples/LabelOutline.tsx
 create mode 100644 packages/react-core/src/components/Label/examples/LabelRouterLink.tsx

diff --git a/packages/react-core/src/components/Label/examples/Label.md b/packages/react-core/src/components/Label/examples/Label.md
index 56b2629b50d..d7a310f6e7b 100644
--- a/packages/react-core/src/components/Label/examples/Label.md
+++ b/packages/react-core/src/components/Label/examples/Label.md
@@ -12,416 +12,22 @@ import { Link } from '@reach/router';
 
 ### Filled
 
-```js
-import React from 'react';
-import { Label } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<React.Fragment>
-  <Label>Grey</Label> <Label icon={<InfoCircleIcon />}>Grey icon</Label>{' '}
-  <Label onClose={Function.prototype}>Grey removable</Label>{' '}
-  <Label icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Grey icon removable
-  </Label>{' '}
-  <Label href="#filled">Grey link</Label>{' '}
-  <Label href="#filled" onClose={Function.prototype}>
-    Grey link removable
-  </Label>
-  <Label icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Grey label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="blue">Blue</Label>{' '}
-  <Label color="blue" icon={<InfoCircleIcon />}>
-    Blue icon
-  </Label>{' '}
-  <Label color="blue" onClose={Function.prototype}>
-    Blue removable
-  </Label>{' '}
-  <Label color="blue" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Blue icon removable
-  </Label>{' '}
-  <Label color="blue" href="#filled">
-    Blue link
-  </Label>{' '}
-  <Label color="blue" href="#filled" onClose={Function.prototype}>
-    Blue link removable
-  </Label>
-  <Label color="blue" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Blue label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="green">Green</Label>{' '}
-  <Label color="green" icon={<InfoCircleIcon />}>
-    Green icon
-  </Label>{' '}
-  <Label color="green" onClose={Function.prototype}>
-    Green removable
-  </Label>{' '}
-  <Label color="green" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Green icon removable
-  </Label>{' '}
-  <Label color="green" href="#filled">
-    Green link
-  </Label>{' '}
-  <Label color="green" href="#filled" onClose={Function.prototype}>
-    Green link removable
-  </Label>
-  <Label color="green" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Green label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="orange">Orange</Label>{' '}
-  <Label color="orange" icon={<InfoCircleIcon />}>
-    Orange icon
-  </Label>{' '}
-  <Label color="orange" onClose={Function.prototype}>
-    Orange removable
-  </Label>{' '}
-  <Label color="orange" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Orange icon removable
-  </Label>{' '}
-  <Label color="orange" href="#filled">
-    Orange link
-  </Label>{' '}
-  <Label color="orange" href="#filled" onClose={Function.prototype}>
-    Orange link removable
-  </Label>
-  <Label color="orange" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Orange label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="red">Red</Label>{' '}
-  <Label color="red" icon={<InfoCircleIcon />}>
-    Red icon
-  </Label>{' '}
-  <Label color="red" onClose={Function.prototype}>
-    Red removable
-  </Label>{' '}
-  <Label color="red" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Red icon removable
-  </Label>{' '}
-  <Label color="red" href="#filled">
-    Red link
-  </Label>{' '}
-  <Label color="red" href="#filled" onClose={Function.prototype}>
-    Red link removable
-  </Label>
-  <Label color="red" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Red label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="purple">Purple</Label>{' '}
-  <Label color="purple" icon={<InfoCircleIcon />}>
-    Purple icon
-  </Label>{' '}
-  <Label color="purple" onClose={Function.prototype}>
-    Purple removable
-  </Label>{' '}
-  <Label color="purple" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Purple icon removable
-  </Label>{' '}
-  <Label color="purple" href="#filled">
-    Purple link
-  </Label>{' '}
-  <Label color="purple" href="#filled" onClose={Function.prototype}>
-    Purple link removable
-  </Label>
-  <Label color="purple" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Purple label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="cyan">Cyan</Label>{' '}
-  <Label color="cyan" icon={<InfoCircleIcon />}>
-    Cyan icon
-  </Label>{' '}
-  <Label color="cyan" onClose={Function.prototype}>
-    Cyan removable
-  </Label>{' '}
-  <Label color="cyan" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Cyan icon removable
-  </Label>{' '}
-  <Label color="cyan" href="#filled">
-    Cyan link
-  </Label>{' '}
-  <Label color="cyan" href="#filled" onClose={Function.prototype}>
-    Cyan link removable
-  </Label>
-  <Label color="cyan" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Cyan label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label color="gold">Gold</Label>{' '}
-  <Label color="gold" icon={<InfoCircleIcon />}>
-    Gold icon
-  </Label>{' '}
-  <Label color="gold" onClose={Function.prototype}>
-    Gold removable
-  </Label>{' '}
-  <Label color="gold" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Gold icon removable
-  </Label>{' '}
-  <Label color="gold" href="#filled">
-    Gold link
-  </Label>{' '}
-  <Label color="gold" href="#filled" onClose={Function.prototype}>
-    Gold link removable
-  </Label>
-  <Label color="gold" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Gold label with icon that overflows
-  </Label>
-</React.Fragment>;
+```ts file="LabelFilled.tsx"
 ```
 
 ### Outline
 
-```js
-import React from 'react';
-import { Label } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<React.Fragment>
-  <Label variant="outline">Grey</Label>{' '}
-  <Label variant="outline" icon={<InfoCircleIcon />}>
-    Grey icon
-  </Label>{' '}
-  <Label variant="outline" onClose={Function.prototype}>
-    Grey removable
-  </Label>{' '}
-  <Label variant="outline" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Grey icon removable
-  </Label>{' '}
-  <Label variant="outline" href="#outline">
-    Grey link
-  </Label>{' '}
-  <Label variant="outline" href="#outline" onClose={Function.prototype}>
-    Grey link removable
-  </Label>
-  <Label variant="outline" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Grey label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="blue">
-    Blue
-  </Label>{' '}
-  <Label variant="outline" color="blue" icon={<InfoCircleIcon />}>
-    Blue icon
-  </Label>{' '}
-  <Label variant="outline" color="blue" onClose={Function.prototype}>
-    Blue removable
-  </Label>{' '}
-  <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Blue icon removable
-  </Label>{' '}
-  <Label variant="outline" color="blue" href="#outline">
-    Blue link
-  </Label>{' '}
-  <Label variant="outline" color="blue" href="#outline" onClose={Function.prototype}>
-    Blue link removable
-  </Label>
-  <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Blue label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="green">
-    Green
-  </Label>{' '}
-  <Label variant="outline" color="green" icon={<InfoCircleIcon />}>
-    Green icon
-  </Label>{' '}
-  <Label variant="outline" color="green" onClose={Function.prototype}>
-    Green removable
-  </Label>{' '}
-  <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Green icon removable
-  </Label>{' '}
-  <Label variant="outline" color="green" href="#outline">
-    Green link
-  </Label>{' '}
-  <Label variant="outline" color="green" href="#outline" onClose={Function.prototype}>
-    Green link removable
-  </Label>
-  <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Green label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="orange">
-    Orange
-  </Label>{' '}
-  <Label variant="outline" color="orange" icon={<InfoCircleIcon />}>
-    Orange icon
-  </Label>{' '}
-  <Label variant="outline" color="orange" onClose={Function.prototype}>
-    Orange removable
-  </Label>{' '}
-  <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Orange icon removable
-  </Label>{' '}
-  <Label variant="outline" color="orange" href="#outline">
-    Orange link
-  </Label>{' '}
-  <Label variant="outline" color="orange" href="#outline" onClose={Function.prototype}>
-    Orange link removable
-  </Label>
-  <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Orange label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="red">
-    Red
-  </Label>{' '}
-  <Label variant="outline" color="red" icon={<InfoCircleIcon />}>
-    Red icon
-  </Label>{' '}
-  <Label variant="outline" color="red" onClose={Function.prototype}>
-    Red removable
-  </Label>{' '}
-  <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Red icon removable
-  </Label>{' '}
-  <Label variant="outline" color="red" href="#outline">
-    Red link
-  </Label>{' '}
-  <Label variant="outline" color="red" href="#outline" onClose={Function.prototype}>
-    Red link removable
-  </Label>
-  <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Red label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="purple">
-    Purple
-  </Label>{' '}
-  <Label variant="outline" color="purple" icon={<InfoCircleIcon />}>
-    Purple icon
-  </Label>{' '}
-  <Label variant="outline" color="purple" onClose={Function.prototype}>
-    Purple removable
-  </Label>{' '}
-  <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Purple icon removable
-  </Label>{' '}
-  <Label variant="outline" color="purple" href="#outline">
-    Purple link
-  </Label>{' '}
-  <Label variant="outline" color="purple" href="#outline" onClose={Function.prototype}>
-    Purple link removable
-  </Label>
-  <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Purple label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="cyan">
-    Cyan
-  </Label>{' '}
-  <Label variant="outline" color="cyan" icon={<InfoCircleIcon />}>
-    Cyan icon
-  </Label>{' '}
-  <Label variant="outline" color="cyan" onClose={Function.prototype}>
-    Cyan removable
-  </Label>{' '}
-  <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Cyan icon removable
-  </Label>{' '}
-  <Label variant="outline" color="cyan" href="#outline">
-    Cyan link
-  </Label>{' '}
-  <Label variant="outline" color="cyan" href="#outline" onClose={Function.prototype}>
-    Cyan link removable
-  </Label>
-  <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Cyan label with icon that overflows
-  </Label>
-  <br />
-  <br />
-  <Label variant="outline" color="gold">
-    Gold
-  </Label>{' '}
-  <Label variant="outline" color="gold" icon={<InfoCircleIcon />}>
-    Gold icon
-  </Label>{' '}
-  <Label variant="outline" color="gold" onClose={Function.prototype}>
-    Gold removable
-  </Label>{' '}
-  <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Gold icon removable
-  </Label>{' '}
-  <Label variant="outline" color="gold" href="#outline">
-    Gold link
-  </Label>{' '}
-  <Label variant="outline" color="gold" href="#outline" onClose={Function.prototype}>
-    Gold link removable
-  </Label>
-  <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Gold label with icon that overflows
-  </Label>
-</React.Fragment>;
+```ts file="LabelOutline.tsx"
 ```
 
 ### Compact
 
-```js
-import React from 'react';
-import { Label } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<React.Fragment>
-  <Label isCompact>Grey</Label>{' '}
-  <Label isCompact icon={<InfoCircleIcon />}>
-    Compact icon
-  </Label>{' '}
-  <Label isCompact onClose={Function.prototype}>
-    Compact removable
-  </Label>{' '}
-  <Label isCompact icon={<InfoCircleIcon />} onClose={Function.prototype}>
-    Compact icon removable
-  </Label>{' '}
-  <Label isCompact href="#outline">
-    Compact link
-  </Label>{' '}
-  <Label isCompact href="#outline" onClose={Function.prototype}>
-    Compact link removable
-  </Label>
-  <Label isCompact icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
-    Compact label with icon that overflows
-  </Label>
-</React.Fragment>;
+```ts file="LabelCompact.tsx"
 ```
 
 ### Router link
 
-```js
-import React from 'react';
-import { Label } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import { Link } from '@reach/router';
-
-<Label
-  color="blue"
-  icon={<InfoCircleIcon />}
-  onClose={Function.prototype}
-  isTruncated
-  render={({ className, content, componentRef }) => (
-    <Link to="/" className={className} innerRef={componentRef}>
-      {content}
-    </Link>
-  )}
->
-  Blue label router link with icon that overflows
-</Label>;
+```ts file="LabelRouterLink.tsx"
 ```
 
 ### Editable
@@ -430,5 +36,5 @@ Click or press either enter or space to begin editing a label. After editing, cl
 
 You can also customize any Label's close button aria-label as this example shows with `closeBtnAriaLabel`.
 
-```js file="LabelEditable.tsx" isBeta 
+```ts file="LabelEditable.tsx" isBeta
 ```
diff --git a/packages/react-core/src/components/Label/examples/LabelCompact.tsx b/packages/react-core/src/components/Label/examples/LabelCompact.tsx
new file mode 100644
index 00000000000..2f77a0644a7
--- /dev/null
+++ b/packages/react-core/src/components/Label/examples/LabelCompact.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Label } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelCompact: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Label isCompact>Grey</Label>{' '}
+    <Label isCompact icon={<InfoCircleIcon />}>
+      Compact icon
+    </Label>{' '}
+    <Label isCompact onClose={() => Function.prototype}>
+      Compact removable
+    </Label>{' '}
+    <Label isCompact icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Compact icon removable
+    </Label>{' '}
+    <Label isCompact href="#outline">
+      Compact link
+    </Label>{' '}
+    <Label isCompact href="#outline" onClose={() => Function.prototype}>
+      Compact link removable
+    </Label>
+    <Label isCompact icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Compact label with icon that overflows
+    </Label>
+  </React.Fragment>
+);
diff --git a/packages/react-core/src/components/Label/examples/LabelFilled.tsx b/packages/react-core/src/components/Label/examples/LabelFilled.tsx
new file mode 100644
index 00000000000..a7357001dc2
--- /dev/null
+++ b/packages/react-core/src/components/Label/examples/LabelFilled.tsx
@@ -0,0 +1,167 @@
+import React from 'react';
+import { Label } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelFilled: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Label>Grey</Label> <Label icon={<InfoCircleIcon />}>Grey icon</Label>{' '}
+    <Label onClose={() => Function.prototype}>Grey removable</Label>{' '}
+    <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Grey icon removable
+    </Label>{' '}
+    <Label href="#filled">Grey link</Label>{' '}
+    <Label href="#filled" onClose={() => Function.prototype}>
+      Grey link removable
+    </Label>
+    <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Grey label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="blue">Blue</Label>{' '}
+    <Label color="blue" icon={<InfoCircleIcon />}>
+      Blue icon
+    </Label>{' '}
+    <Label color="blue" onClose={() => Function.prototype}>
+      Blue removable
+    </Label>{' '}
+    <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Blue icon removable
+    </Label>{' '}
+    <Label color="blue" href="#filled">
+      Blue link
+    </Label>{' '}
+    <Label color="blue" href="#filled" onClose={() => Function.prototype}>
+      Blue link removable
+    </Label>
+    <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Blue label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="green">Green</Label>{' '}
+    <Label color="green" icon={<InfoCircleIcon />}>
+      Green icon
+    </Label>{' '}
+    <Label color="green" onClose={() => Function.prototype}>
+      Green removable
+    </Label>{' '}
+    <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Green icon removable
+    </Label>{' '}
+    <Label color="green" href="#filled">
+      Green link
+    </Label>{' '}
+    <Label color="green" href="#filled" onClose={() => Function.prototype}>
+      Green link removable
+    </Label>
+    <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Green label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="orange">Orange</Label>{' '}
+    <Label color="orange" icon={<InfoCircleIcon />}>
+      Orange icon
+    </Label>{' '}
+    <Label color="orange" onClose={() => Function.prototype}>
+      Orange removable
+    </Label>{' '}
+    <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Orange icon removable
+    </Label>{' '}
+    <Label color="orange" href="#filled">
+      Orange link
+    </Label>{' '}
+    <Label color="orange" href="#filled" onClose={() => Function.prototype}>
+      Orange link removable
+    </Label>
+    <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Orange label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="red">Red</Label>{' '}
+    <Label color="red" icon={<InfoCircleIcon />}>
+      Red icon
+    </Label>{' '}
+    <Label color="red" onClose={() => Function.prototype}>
+      Red removable
+    </Label>{' '}
+    <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Red icon removable
+    </Label>{' '}
+    <Label color="red" href="#filled">
+      Red link
+    </Label>{' '}
+    <Label color="red" href="#filled" onClose={() => Function.prototype}>
+      Red link removable
+    </Label>
+    <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Red label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="purple">Purple</Label>{' '}
+    <Label color="purple" icon={<InfoCircleIcon />}>
+      Purple icon
+    </Label>{' '}
+    <Label color="purple" onClose={() => Function.prototype}>
+      Purple removable
+    </Label>{' '}
+    <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Purple icon removable
+    </Label>{' '}
+    <Label color="purple" href="#filled">
+      Purple link
+    </Label>{' '}
+    <Label color="purple" href="#filled" onClose={() => Function.prototype}>
+      Purple link removable
+    </Label>
+    <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Purple label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="cyan">Cyan</Label>{' '}
+    <Label color="cyan" icon={<InfoCircleIcon />}>
+      Cyan icon
+    </Label>{' '}
+    <Label color="cyan" onClose={() => Function.prototype}>
+      Cyan removable
+    </Label>{' '}
+    <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Cyan icon removable
+    </Label>{' '}
+    <Label color="cyan" href="#filled">
+      Cyan link
+    </Label>{' '}
+    <Label color="cyan" href="#filled" onClose={() => Function.prototype}>
+      Cyan link removable
+    </Label>
+    <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Cyan label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label color="gold">Gold</Label>{' '}
+    <Label color="gold" icon={<InfoCircleIcon />}>
+      Gold icon
+    </Label>{' '}
+    <Label color="gold" onClose={() => Function.prototype}>
+      Gold removable
+    </Label>{' '}
+    <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Gold icon removable
+    </Label>{' '}
+    <Label color="gold" href="#filled">
+      Gold link
+    </Label>{' '}
+    <Label color="gold" href="#filled" onClose={() => Function.prototype}>
+      Gold link removable
+    </Label>
+    <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Gold label with icon that overflows
+    </Label>
+  </React.Fragment>
+);
diff --git a/packages/react-core/src/components/Label/examples/LabelOutline.tsx b/packages/react-core/src/components/Label/examples/LabelOutline.tsx
new file mode 100644
index 00000000000..0b16390efdc
--- /dev/null
+++ b/packages/react-core/src/components/Label/examples/LabelOutline.tsx
@@ -0,0 +1,188 @@
+import React from 'react';
+import { Label } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelOutline: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Label variant="outline">Grey</Label>{' '}
+    <Label variant="outline" icon={<InfoCircleIcon />}>
+      Grey icon
+    </Label>{' '}
+    <Label variant="outline" onClose={() => Function.prototype}>
+      Grey removable
+    </Label>{' '}
+    <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Grey icon removable
+    </Label>{' '}
+    <Label variant="outline" href="#outline">
+      Grey link
+    </Label>{' '}
+    <Label variant="outline" href="#outline" onClose={() => Function.prototype}>
+      Grey link removable
+    </Label>
+    <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Grey label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label variant="outline" color="blue">
+      Blue
+    </Label>{' '}
+    <Label variant="outline" color="blue" icon={<InfoCircleIcon />}>
+      Blue icon
+    </Label>{' '}
+    <Label variant="outline" color="blue" onClose={() => Function.prototype}>
+      Blue removable
+    </Label>{' '}
+    <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Blue icon removable
+    </Label>{' '}
+    <Label variant="outline" color="blue" href="#outline">
+      Blue link
+    </Label>{' '}
+    <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
+      Blue link removable
+    </Label>
+    <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Blue label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label variant="outline" color="green">
+      Green
+    </Label>{' '}
+    <Label variant="outline" color="green" icon={<InfoCircleIcon />}>
+      Green icon
+    </Label>{' '}
+    <Label variant="outline" color="green" onClose={() => Function.prototype}>
+      Green removable
+    </Label>{' '}
+    <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Green icon removable
+    </Label>{' '}
+    <Label variant="outline" color="green" href="#outline">
+      Green link
+    </Label>{' '}
+    <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
+      Green link removable
+    </Label>
+    <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Green label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label variant="outline" color="orange">
+      Orange
+    </Label>{' '}
+    <Label variant="outline" color="orange" icon={<InfoCircleIcon />}>
+      Orange icon
+    </Label>{' '}
+    <Label variant="outline" color="orange" onClose={() => Function.prototype}>
+      Orange removable
+    </Label>{' '}
+    <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Orange icon removable
+    </Label>{' '}
+    <Label variant="outline" color="orange" href="#outline">
+      Orange link
+    </Label>{' '}
+    <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
+      Orange link removable
+    </Label>
+    <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Orange label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label variant="outline" color="red">
+      Red
+    </Label>{' '}
+    <Label variant="outline" color="red" icon={<InfoCircleIcon />}>
+      Red icon
+    </Label>{' '}
+    <Label variant="outline" color="red" onClose={() => Function.prototype}>
+      Red removable
+    </Label>{' '}
+    <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Red icon removable
+    </Label>{' '}
+    <Label variant="outline" color="red" href="#outline">
+      Red link
+    </Label>{' '}
+    <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
+      Red link removable
+    </Label>
+    <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Red label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label variant="outline" color="purple">
+      Purple
+    </Label>{' '}
+    <Label variant="outline" color="purple" icon={<InfoCircleIcon />}>
+      Purple icon
+    </Label>{' '}
+    <Label variant="outline" color="purple" onClose={() => Function.prototype}>
+      Purple removable
+    </Label>{' '}
+    <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Purple icon removable
+    </Label>{' '}
+    <Label variant="outline" color="purple" href="#outline">
+      Purple link
+    </Label>{' '}
+    <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
+      Purple link removable
+    </Label>
+    <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Purple label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label variant="outline" color="cyan">
+      Cyan
+    </Label>{' '}
+    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />}>
+      Cyan icon
+    </Label>{' '}
+    <Label variant="outline" color="cyan" onClose={() => Function.prototype}>
+      Cyan removable
+    </Label>{' '}
+    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Cyan icon removable
+    </Label>{' '}
+    <Label variant="outline" color="cyan" href="#outline">
+      Cyan link
+    </Label>{' '}
+    <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
+      Cyan link removable
+    </Label>
+    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Cyan label with icon that overflows
+    </Label>
+    <br />
+    <br />
+    <Label variant="outline" color="gold">
+      Gold
+    </Label>{' '}
+    <Label variant="outline" color="gold" icon={<InfoCircleIcon />}>
+      Gold icon
+    </Label>{' '}
+    <Label variant="outline" color="gold" onClose={() => Function.prototype}>
+      Gold removable
+    </Label>{' '}
+    <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      Gold icon removable
+    </Label>{' '}
+    <Label variant="outline" color="gold" href="#outline">
+      Gold link
+    </Label>{' '}
+    <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
+      Gold link removable
+    </Label>
+    <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} isTruncated>
+      Gold label with icon that overflows
+    </Label>
+  </React.Fragment>
+);
diff --git a/packages/react-core/src/components/Label/examples/LabelRouterLink.tsx b/packages/react-core/src/components/Label/examples/LabelRouterLink.tsx
new file mode 100644
index 00000000000..cc09847321a
--- /dev/null
+++ b/packages/react-core/src/components/Label/examples/LabelRouterLink.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Label } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import { Link } from '@reach/router';
+
+export const LabelRouterLink: React.FunctionComponent = () => (
+  <Label
+    color="blue"
+    icon={<InfoCircleIcon />}
+    onClose={() => Function.prototype}
+    isTruncated
+    render={({ className, content, componentRef }) => (
+      <Link to="/" className={className} innerRef={componentRef}>
+        {content}
+      </Link>
+    )}
+  >
+    Blue label router link with icon that overflows
+  </Label>
+);