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';
-
-
- }>Grey icon{' '}
- {' '}
- } onClose={Function.prototype}>
- Grey icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Grey label with icon that overflows
-
-
-
- {' '}
- }>
- Blue icon
- {' '}
- {' '}
- } onClose={Function.prototype}>
- Blue icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Blue label with icon that overflows
-
-
-
- {' '}
- }>
- Green icon
- {' '}
- {' '}
- } onClose={Function.prototype}>
- Green icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Green label with icon that overflows
-
-
-
- {' '}
- }>
- Orange icon
- {' '}
- {' '}
- } onClose={Function.prototype}>
- Orange icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Orange label with icon that overflows
-
-
-
- {' '}
- }>
- Red icon
- {' '}
- {' '}
- } onClose={Function.prototype}>
- Red icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Red label with icon that overflows
-
-
-
- {' '}
- }>
- Purple icon
- {' '}
- {' '}
- } onClose={Function.prototype}>
- Purple icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Purple label with icon that overflows
-
-
-
- {' '}
- }>
- Cyan icon
- {' '}
- {' '}
- } onClose={Function.prototype}>
- Cyan icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Cyan label with icon that overflows
-
-
-
- {' '}
- }>
- Gold icon
- {' '}
- {' '}
- } onClose={Function.prototype}>
- Gold icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Gold label with icon that overflows
-
-;
+```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';
-
-
- {' '}
- }>
- Grey icon
- {' '}
- {' '}
- } onClose={Function.prototype}>
- Grey icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Grey label with icon that overflows
-
-
-
- {' '}
- }>
- Blue icon
- {' '}
- {' '}
- } onClose={Function.prototype}>
- Blue icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Blue label with icon that overflows
-
-
-
- {' '}
- }>
- Green icon
- {' '}
- {' '}
- } onClose={Function.prototype}>
- Green icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Green label with icon that overflows
-
-
-
- {' '}
- }>
- Orange icon
- {' '}
- {' '}
- } onClose={Function.prototype}>
- Orange icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Orange label with icon that overflows
-
-
-
- {' '}
- }>
- Red icon
- {' '}
- {' '}
- } onClose={Function.prototype}>
- Red icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Red label with icon that overflows
-
-
-
- {' '}
- }>
- Purple icon
- {' '}
- {' '}
- } onClose={Function.prototype}>
- Purple icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Purple label with icon that overflows
-
-
-
- {' '}
- }>
- Cyan icon
- {' '}
- {' '}
- } onClose={Function.prototype}>
- Cyan icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Cyan label with icon that overflows
-
-
-
- {' '}
- }>
- Gold icon
- {' '}
- {' '}
- } onClose={Function.prototype}>
- Gold icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Gold label with icon that overflows
-
-;
+```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';
-
-
- {' '}
- }>
- Compact icon
- {' '}
- {' '}
- } onClose={Function.prototype}>
- Compact icon removable
- {' '}
- {' '}
-
- } onClose={Function.prototype} isTruncated>
- Compact label with icon that overflows
-
-;
+```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';
-
-}
- onClose={Function.prototype}
- isTruncated
- render={({ className, content, componentRef }) => (
-
- {content}
-
- )}
->
- Blue label router link with icon that overflows
-;
+```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 = () => (
+
+ {' '}
+ }>
+ Compact icon
+ {' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Compact icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Compact label with icon that overflows
+
+
+);
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 = () => (
+
+ }>Grey icon{' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Grey icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Grey label with icon that overflows
+
+
+
+ {' '}
+ }>
+ Blue icon
+ {' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Blue icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Blue label with icon that overflows
+
+
+
+ {' '}
+ }>
+ Green icon
+ {' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Green icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Green label with icon that overflows
+
+
+
+ {' '}
+ }>
+ Orange icon
+ {' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Orange icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Orange label with icon that overflows
+
+
+
+ {' '}
+ }>
+ Red icon
+ {' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Red icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Red label with icon that overflows
+
+
+
+ {' '}
+ }>
+ Purple icon
+ {' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Purple icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Purple label with icon that overflows
+
+
+
+ {' '}
+ }>
+ Cyan icon
+ {' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Cyan icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Cyan label with icon that overflows
+
+
+
+ {' '}
+ }>
+ Gold icon
+ {' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Gold icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Gold label with icon that overflows
+
+
+);
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 = () => (
+
+ {' '}
+ }>
+ Grey icon
+ {' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Grey icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Grey label with icon that overflows
+
+
+
+ {' '}
+ }>
+ Blue icon
+ {' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Blue icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Blue label with icon that overflows
+
+
+
+ {' '}
+ }>
+ Green icon
+ {' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Green icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Green label with icon that overflows
+
+
+
+ {' '}
+ }>
+ Orange icon
+ {' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Orange icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Orange label with icon that overflows
+
+
+
+ {' '}
+ }>
+ Red icon
+ {' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Red icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Red label with icon that overflows
+
+
+
+ {' '}
+ }>
+ Purple icon
+ {' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Purple icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Purple label with icon that overflows
+
+
+
+ {' '}
+ }>
+ Cyan icon
+ {' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Cyan icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Cyan label with icon that overflows
+
+
+
+ {' '}
+ }>
+ Gold icon
+ {' '}
+ {' '}
+ } onClose={() => Function.prototype}>
+ Gold icon removable
+ {' '}
+ {' '}
+
+ } onClose={() => Function.prototype} isTruncated>
+ Gold label with icon that overflows
+
+
+);
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 = () => (
+ }
+ onClose={() => Function.prototype}
+ isTruncated
+ render={({ className, content, componentRef }) => (
+
+ {content}
+
+ )}
+ >
+ Blue label router link with icon that overflows
+
+);