diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyState.md b/packages/react-core/src/components/EmptyState/examples/EmptyState.md
index 933983af60b..ead9b43b917 100644
--- a/packages/react-core/src/components/EmptyState/examples/EmptyState.md
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyState.md
@@ -9,222 +9,36 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 ## Examples
 ### Basic
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-<EmptyState>
-  <EmptyStateIcon icon={CubesIcon} />
-  <Title headingLevel="h4" size="lg">
-    Empty state
-  </Title>
-  <EmptyStateBody>
-    This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-    enough to meet a variety of needs.
-  </EmptyStateBody>
-  <Button variant="primary">Primary action</Button>
-  <EmptyStateSecondaryActions>
-    <Button variant="link">Multiple</Button>
-    <Button variant="link">Action Buttons</Button>
-    <Button variant="link">Can</Button>
-    <Button variant="link">Go here</Button>
-    <Button variant="link">In the secondary</Button>
-    <Button variant="link">Action area</Button>
-  </EmptyStateSecondaryActions>
-</EmptyState>
+```ts file="EmptyStateBasic.tsx"
 ```
 
 ### Extra small
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
 
-<EmptyState variant={EmptyStateVariant.xs}>
-  <Title headingLevel="h4" size="md">
-    Empty state
-  </Title>
-  <EmptyStateBody>
-    This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-    enough to meet a variety of needs.
-  </EmptyStateBody>
-  <EmptyStateSecondaryActions>
-    <Button variant="link">Multiple</Button>
-    <Button variant="link">Action Buttons</Button>
-    <Button variant="link">Can</Button>
-    <Button variant="link">Go here</Button>
-    <Button variant="link">In the secondary</Button>
-    <Button variant="link">Action area</Button>
-  </EmptyStateSecondaryActions>
-</EmptyState>
+```ts file="EmptyStateExtraSmall.tsx"
 ```
 
 ### Small
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-<EmptyState variant={EmptyStateVariant.small}>
-  <EmptyStateIcon icon={CubesIcon} />
-  <Title headingLevel="h4" size="lg">
-    Empty state
-  </Title>
-  <EmptyStateBody>
-    This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-    enough to meet a variety of needs.
-  </EmptyStateBody>
-  <Button variant="primary">Primary action</Button>
-  <EmptyStateSecondaryActions>
-    <Button variant="link">Multiple</Button>
-    <Button variant="link">Action Buttons</Button>
-    <Button variant="link">Can</Button>
-    <Button variant="link">Go here</Button>
-    <Button variant="link">In the secondary</Button>
-    <Button variant="link">Action area</Button>
-  </EmptyStateSecondaryActions>
-</EmptyState>
+```ts file="EmptyStateSmall.tsx"
 ```
 
 ### Large
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-<EmptyState variant={EmptyStateVariant.large}>
-  <EmptyStateIcon icon={CubesIcon} />
-  <Title headingLevel="h4" size="lg">
-    Empty state
-  </Title>
-  <EmptyStateBody>
-    This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-    enough to meet a variety of needs.
-  </EmptyStateBody>
-  <Button variant="primary">Primary action</Button>
-  <EmptyStateSecondaryActions>
-    <Button variant="link">Multiple</Button>
-    <Button variant="link">Action Buttons</Button>
-    <Button variant="link">Can</Button>
-    <Button variant="link">Go here</Button>
-    <Button variant="link">In the secondary</Button>
-    <Button variant="link">Action area</Button>
-  </EmptyStateSecondaryActions>
-</EmptyState>
+```ts file="EmptyStateLarge.tsx"
 ```
 
 ### Extra large
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-<EmptyState variant={EmptyStateVariant.xl}>
-  <EmptyStateIcon icon={CubesIcon} />
-  <Title headingLevel="h5" size="4xl">
-    Empty state
-  </Title>
-  <EmptyStateBody>
-    This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-    enough to meet a variety of needs.
-  </EmptyStateBody>
-  <Button variant="primary">Primary action</Button>
-  <EmptyStateSecondaryActions>
-    <Button variant="link">Multiple</Button>
-    <Button variant="link">Action Buttons</Button>
-    <Button variant="link">Can</Button>
-    <Button variant="link">Go here</Button>
-    <Button variant="link">In the secondary</Button>
-    <Button variant="link">Action area</Button>
-  </EmptyStateSecondaryActions>
-</EmptyState>
+```ts file="EmptyStateExtraLarge.tsx"
 ```
 
 ### Spinner
-```js
-import React from 'react';
-import {
-  Title,
-  EmptyState,
-  EmptyStateIcon,
-  Spinner
-} from '@patternfly/react-core';
 
-
-EmptyStateSpinner = () => {
-  return (
-    <EmptyState>
-      <EmptyStateIcon variant="container" component={Spinner} />
-      <Title size="lg" headingLevel="h4">
-        Loading
-      </Title>
-    </EmptyState>
-  );
-}
+```ts file="EmptyStateSpinner.tsx"
 ```
 
 ### No match found
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStatePrimary,
-  EmptyStateIcon,
-  EmptyStateBody
-} from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-
 
-<EmptyState>
-  <EmptyStateIcon icon={SearchIcon} />
-  <Title size="lg" headingLevel="h4">
-    No results found
-  </Title>
-  <EmptyStateBody>
-    No results match the filter criteria. Clear all filters and try again.
-  </EmptyStateBody>
-  <EmptyStatePrimary>
-    <Button variant="link">Clear all filters</Button>
-  </EmptyStatePrimary>
-</EmptyState>
+```ts file="EmptyStateNoMatchFound.tsx"
 ```
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateBasic.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateBasic.tsx
new file mode 100644
index 00000000000..dd330c8a14e
--- /dev/null
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateBasic.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const EmptyStateBasic: React.FunctionComponent = () => (
+  <EmptyState>
+    <EmptyStateIcon icon={CubesIcon} />
+    <Title headingLevel="h4" size="lg">
+      Empty state
+    </Title>
+    <EmptyStateBody>
+      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
+      enough to meet a variety of needs.
+    </EmptyStateBody>
+    <Button variant="primary">Primary action</Button>
+    <EmptyStateSecondaryActions>
+      <Button variant="link">Multiple</Button>
+      <Button variant="link">Action Buttons</Button>
+      <Button variant="link">Can</Button>
+      <Button variant="link">Go here</Button>
+      <Button variant="link">In the secondary</Button>
+      <Button variant="link">Action area</Button>
+    </EmptyStateSecondaryActions>
+  </EmptyState>
+);
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx
new file mode 100644
index 00000000000..f3dad7b7cb6
--- /dev/null
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const EmptyStateExtraLarge: React.FunctionComponent = () => (
+  <EmptyState variant={EmptyStateVariant.xl}>
+    <EmptyStateIcon icon={CubesIcon} />
+    <Title headingLevel="h5" size="4xl">
+      Empty state
+    </Title>
+    <EmptyStateBody>
+      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
+      enough to meet a variety of needs.
+    </EmptyStateBody>
+    <Button variant="primary">Primary action</Button>
+    <EmptyStateSecondaryActions>
+      <Button variant="link">Multiple</Button>
+      <Button variant="link">Action Buttons</Button>
+      <Button variant="link">Can</Button>
+      <Button variant="link">Go here</Button>
+      <Button variant="link">In the secondary</Button>
+      <Button variant="link">Action area</Button>
+    </EmptyStateSecondaryActions>
+  </EmptyState>
+);
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx
new file mode 100644
index 00000000000..fb823a3b87f
--- /dev/null
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+
+export const EmptyStateExtraSmall: React.FunctionComponent = () => (
+  <EmptyState variant={EmptyStateVariant.xs}>
+    <Title headingLevel="h4" size="md">
+      Empty state
+    </Title>
+    <EmptyStateBody>
+      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
+      enough to meet a variety of needs.
+    </EmptyStateBody>
+    <EmptyStateSecondaryActions>
+      <Button variant="link">Multiple</Button>
+      <Button variant="link">Action Buttons</Button>
+      <Button variant="link">Can</Button>
+      <Button variant="link">Go here</Button>
+      <Button variant="link">In the secondary</Button>
+      <Button variant="link">Action area</Button>
+    </EmptyStateSecondaryActions>
+  </EmptyState>
+);
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateLarge.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateLarge.tsx
new file mode 100644
index 00000000000..3edcdb07e29
--- /dev/null
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateLarge.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const EmptyStateLarge: React.FunctionComponent = () => (
+  <EmptyState variant={EmptyStateVariant.large}>
+    <EmptyStateIcon icon={CubesIcon} />
+    <Title headingLevel="h4" size="lg">
+      Empty state
+    </Title>
+    <EmptyStateBody>
+      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
+      enough to meet a variety of needs.
+    </EmptyStateBody>
+    <Button variant="primary">Primary action</Button>
+    <EmptyStateSecondaryActions>
+      <Button variant="link">Multiple</Button>
+      <Button variant="link">Action Buttons</Button>
+      <Button variant="link">Can</Button>
+      <Button variant="link">Go here</Button>
+      <Button variant="link">In the secondary</Button>
+      <Button variant="link">Action area</Button>
+    </EmptyStateSecondaryActions>
+  </EmptyState>
+);
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx
new file mode 100644
index 00000000000..3fc1927dcea
--- /dev/null
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Title, Button, EmptyState, EmptyStatePrimary, EmptyStateIcon, EmptyStateBody } from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+export const EmptyStateNoMatchFound: React.FunctionComponent = () => (
+  <EmptyState>
+    <EmptyStateIcon icon={SearchIcon} />
+    <Title size="lg" headingLevel="h4">
+      No results found
+    </Title>
+    <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+    <EmptyStatePrimary>
+      <Button variant="link">Clear all filters</Button>
+    </EmptyStatePrimary>
+  </EmptyState>
+);
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateSmall.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateSmall.tsx
new file mode 100644
index 00000000000..9f81a79aab9
--- /dev/null
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateSmall.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const EmptyStateSmall: React.FunctionComponent = () => (
+  <EmptyState variant={EmptyStateVariant.small}>
+    <EmptyStateIcon icon={CubesIcon} />
+    <Title headingLevel="h4" size="lg">
+      Empty state
+    </Title>
+    <EmptyStateBody>
+      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
+      enough to meet a variety of needs.
+    </EmptyStateBody>
+    <Button variant="primary">Primary action</Button>
+    <EmptyStateSecondaryActions>
+      <Button variant="link">Multiple</Button>
+      <Button variant="link">Action Buttons</Button>
+      <Button variant="link">Can</Button>
+      <Button variant="link">Go here</Button>
+      <Button variant="link">In the secondary</Button>
+      <Button variant="link">Action area</Button>
+    </EmptyStateSecondaryActions>
+  </EmptyState>
+);
diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateSpinner.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateSpinner.tsx
new file mode 100644
index 00000000000..6a30d2d8746
--- /dev/null
+++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateSpinner.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Title, EmptyState, EmptyStateIcon, Spinner } from '@patternfly/react-core';
+
+export const EmptyStateSpinner: React.FunctionComponent = () => (
+  <EmptyState>
+    <EmptyStateIcon variant="container" component={Spinner} />
+    <Title size="lg" headingLevel="h4">
+      Loading
+    </Title>
+  </EmptyState>
+);