diff --git a/packages/react-core/src/components/Button/examples/Button.md b/packages/react-core/src/components/Button/examples/Button.md
index 337b7b04914..07463ecab26 100644
--- a/packages/react-core/src/components/Button/examples/Button.md
+++ b/packages/react-core/src/components/Button/examples/Button.md
@@ -17,350 +17,65 @@ import { Link } from '@reach/router';
 
 ### Variations
 
-```js
-import React from 'react';
-import { Button } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-
-<React.Fragment>
-  <Button variant="primary">Primary</Button>{' '}
-  <Button variant="secondary">Secondary</Button>{' '}
-  <Button variant="secondary" isDanger>
-    Danger Secondary
-  </Button>{' '}
-  <Button variant="tertiary">Tertiary</Button>{' '}
-  <Button variant="danger">Danger</Button>{' '}
-  <Button variant="warning">Warning</Button>
-  <br />
-  <br />
-  <Button variant="link" icon={<PlusCircleIcon />}>
-    Link
-  </Button>{' '}
-  <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
-    Link
-  </Button>{' '}
-  <Button variant="link" isInline>
-    Inline link
-  </Button>{' '}
-  <Button variant="link" isDanger>
-    Danger link
-  </Button>
-  <br />
-  <br />
-  <Button variant="plain" aria-label="Action">
-    <TimesIcon />
-  </Button>
-  <br />
-  <br />
-  <Button variant="control">Control</Button>{' '}
-  <Button variant="control" aria-label="Copy">
-    <CopyIcon />
-  </Button>
-</React.Fragment>;
+```ts file="./ButtonVariations.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { Button } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-
-<React.Fragment>
-  <Button isDisabled>Primary disabled</Button>{' '}
-  <Button isDisabled>Secondary disabled</Button>{' '}
-  <Button variant="secondary" isDanger isDisabled>
-    Danger secondary disabled
-  </Button>{' '}
-  <Button isDisabled variant="tertiary">
-    Tertiary disabled
-  </Button>{' '}
-  <Button isDisabled variant="danger">
-    Danger disabled
-  </Button>{' '}
-  <Button isDisabled variant="warning">
-    Warning disabled
-  </Button>
-  <br />
-  <br />
-  <Button isDisabled variant="link" icon={<PlusCircleIcon />}>
-    Link disabled
-  </Button>{' '}
-  <Button isDisabled variant="link" isInline>
-    Inline link disabled
-  </Button>{' '}
-  <Button variant="link" isDanger isDisabled>
-    Danger link disabled
-  </Button>{' '}
-  <Button isDisabled variant="plain" aria-label="Action">
-    <TimesIcon />
-  </Button>{' '}
-  <Button isDisabled variant="control">
-    Control disabled
-  </Button>
-</React.Fragment>;
+```ts file="./ButtonDisabled.tsx"
 ```
 
 ### Aria disabled
 
-```js
-import React from 'react';
-import { Button } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-
-<React.Fragment>
-  <Button isAriaDisabled>Primary aria disabled</Button>{' '}
-  <Button isAriaDisabled>Secondary aria disabled</Button>{' '}
-  <Button variant="secondary" isDanger isAriaDisabled>
-    Danger secondary aria disabled
-  </Button>{' '}
-  <Button isAriaDisabled variant="tertiary">
-    Tertiary aria disabled
-  </Button>{' '}
-  <Button isAriaDisabled variant="danger">
-    Danger disabled
-  </Button>{' '}
-  <Button isAriaDisabled variant="warning">
-    Warning disabled
-  </Button>
-  <br />
-  <br />
-  <Button isAriaDisabled variant="link" icon={<PlusCircleIcon />}>
-    Link aria disabled
-  </Button>{' '}
-  <Button isAriaDisabled variant="link" isInline>
-    Inline link aria disabled
-  </Button>{' '}
-  <Button variant="link" isDanger isAriaDisabled>
-    Danger link disabled
-  </Button>{' '}
-  <Button isAriaDisabled variant="plain" aria-label="Action">
-    <TimesIcon />
-  </Button>{' '}
-  <Button isAriaDisabled variant="control">
-    Control aria disabled
-  </Button>
-</React.Fragment>;
+```ts file="./ButtonAriaDisabled.tsx"
 ```
 
 ### Aria disabled button with tooltip
 
-```js
-import React from 'react';
-import { Button, Tooltip } from '@patternfly/react-core';
-
-<Tooltip content="Aria-disabled buttons are like disabled buttons, but focusable. Allows for tooltip support.">
-  <Button isAriaDisabled variant="secondary">
-    Secondary button to core docs
-  </Button>
-</Tooltip>;
+```ts file="./ButtonAriaDisabledTooltip.tsx"
 ```
 
 ### Aria disabled link as button with tooltip
 
-```js
-import React from 'react';
-import { Button, Tooltip } from '@patternfly/react-core';
-
-<Tooltip content="Aria-disabled link as button with tooltip">
-  <Button component="a" isAriaDisabled href="https://pf4.patternfly.org/" target="_blank" variant="tertiary">
-    Tertiary link as button to core docs
-  </Button>
-</Tooltip>;
+```ts file="./ButtonAriaDisabledLinkTooltip.tsx"
 ```
 
 ### Links as buttons
 
-```js
-import React from 'react';
-import { Button } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Button component="a" href="https://pf4.patternfly.org/" target="_blank" variant="primary">
-    Link to core docs
-  </Button>{' '}
-  <Button component="a" href="https://pf4.patternfly.org/" target="_blank" variant="secondary">
-    Secondary link to core docs
-  </Button>{' '}
-  <Button isDisabled component="a" href="https://pf4.patternfly.org/" target="_blank" variant="tertiary">
-    Tertiary link to core docs
-  </Button>{' '}
-  <Button component="a" href="https://pf4.patternfly.org/contribution/#modifiers" variant="link">
-    Jump to modifiers in contribution guidelines
-  </Button>
-</React.Fragment>;
+```ts file="./ButtonLinks.tsx"
 ```
 
 ### Inline link as span
 
-```js
-import React from 'react';
-import { Button } from '@patternfly/react-core';
-
-InlineLinkAsSpan = () => {
-  const handleKeydown = evt => {
-    const { keyCode } = evt;
-    const isEnterOrSpaceKey = keyCode === 13 || keyCode === 32;
-
-    if (isEnterOrSpaceKey) {
-      evt.preventDefault();
-      alert(`${keyCode === 13 ? 'Enter' : 'Space'} key default behavior stopped by onKeyDown`);
-    }
-  };
-
-  return (
-    <>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <Button variant="link" isInline component="span">
-          This is long button text that needs to be a span so that it will wrap inline with the text around it.
-        </Button> Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum velit elementum non.
-      </p>
-
-      <br />
-
-      <p>
-        Note that using a <b>span</b> as a button does not fire the <b>onclick</b> event for Enter or Space keys.
-        <Button variant="link" isInline component="span" onKeyDown={handleKeydown}>
-          An <b>onKeyDown</b> event listener is needed for Enter and Space key presses to prevent their default behavior
-          and trigger your code.
-        </Button> Pressing the Enter or Space keys on the inline link as span above demonstrates this by triggering an alert.
-      </p>
-    </>
-  );
-};
+```ts file="./ButtonInlineSpanLink.tsx"
 ```
 
 ### Block level
 
-```js
-import React from 'react';
-import { Button } from '@patternfly/react-core';
-
-<Button isBlock>Block level button</Button>;
+```ts file="./ButtonBlock.tsx"
 ```
 
 ### Types
 
-```js
-import React from 'react';
-import { Button } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Button type="submit">Submit</Button> <Button type="reset">Reset</Button> <Button>Default</Button>
-</React.Fragment>;
+```ts file="./ButtonTypes.tsx"
 ```
 
 ### Small
 
-```js
-import React from 'react';
-import { Button } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Button variant="primary" isSmall>
-    Primary
-  </Button>{' '}
-  <Button variant="secondary" isSmall>
-    Secondary
-  </Button>{' '}
-  <Button variant="tertiary" isSmall>
-    Tertiary
-  </Button>{' '}
-  <Button variant="danger" isSmall>
-    Danger
-  </Button>{' '}
-  <Button variant="warning" isSmall>
-    Warning
-  </Button>
-  <br />
-  <br />
-</React.Fragment>;
+```ts file="./ButtonSmall.tsx"
 ```
 
 ### Call to action
 
-```js
-import React from 'react';
-import { Button } from '@patternfly/react-core';
-import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
-
-<React.Fragment>
-  <Button variant="primary" isLarge>
-    Call to action
-  </Button>{' '}
-  <Button variant="secondary" isLarge>
-    Call to action
-  </Button>{' '}
-  <Button variant="tertiary" isLarge>
-    Call to action
-  </Button>{' '}
-  <Button variant="link" isLarge>
-    Call to action <ArrowRightIcon />
-  </Button>
-  <br />
-  <br />
-</React.Fragment>;
+```ts file="./ButtonCallToAction.tsx"
 ```
 
 ### Progress
 
-```js
-import React from 'react';
-import { Button } from '@patternfly/react-core';
-
-ButtonProgressVariants = () => {
-  const [isPrimaryLoading, setIsPrimaryLoading] = React.useState(true);
-  const [isSecondaryLoading, setIsSecondaryLoading] = React.useState(true);
-  const extraPrimaryProps = {};
-  if (isPrimaryLoading) {
-    extraPrimaryProps.spinnerAriaValueText = 'Loading';
-  }
-  const extraSecondaryProps = {};
-  if (isSecondaryLoading) {
-    extraSecondaryProps.spinnerAriaValueText = 'Loading';
-  }
-
-  return (
-    <React.Fragment>
-      <Button
-        spinnerAriaValueText={isPrimaryLoading ? 'Loading' : undefined}
-        isLoading={isPrimaryLoading}
-        variant="primary"
-        onClick={() => setIsPrimaryLoading(!isPrimaryLoading)}
-        {...extraPrimaryProps}
-      >
-        {isPrimaryLoading ? 'Click to stop loading' : 'Click to start loading'}
-      </Button>{' '}
-      <Button
-        spinnerAriaValueText={isSecondaryLoading ? 'Loading' : undefined}
-        isLoading={isSecondaryLoading}
-        variant="secondary"
-        onClick={() => setIsSecondaryLoading(!isSecondaryLoading)}
-        {...extraSecondaryProps}
-      >
-        {isSecondaryLoading ? 'Click to stop loading' : 'Click to start loading'}
-      </Button>
-      <br />
-      <br />
-    </React.Fragment>
-  );
-};
+```ts file="./ButtonProgress.tsx"
 ```
 
 ### Router link
-```js
-import React from 'react';
-import { Button } from '@patternfly/react-core';
-import { Link } from '@reach/router';
 
-<Button variant="link" component={props => <Link {...props} to="#"/>}>
-  Router link
-</Button>
+```ts file="./ButtonRouterLink.tsx"
 ```
-
diff --git a/packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx b/packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx
new file mode 100644
index 00000000000..43bce4e68f8
--- /dev/null
+++ b/packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button, Flex } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const ButtonAriaDisabled: React.FunctionComponent = () => (
+  <Flex direction={{ default: 'column' }}>
+    <Flex>
+      <Button isAriaDisabled>Primary aria disabled</Button>
+      <Button isAriaDisabled>Secondary aria disabled</Button>
+      <Button variant="secondary" isDanger isAriaDisabled>
+        Danger secondary aria disabled
+      </Button>
+      <Button isAriaDisabled variant="tertiary">
+        Tertiary aria disabled
+      </Button>
+      <Button isAriaDisabled variant="danger">
+        Danger disabled
+      </Button>
+      <Button isAriaDisabled variant="warning">
+        Warning disabled
+      </Button>
+    </Flex>
+
+    <Flex>
+      <Button isAriaDisabled variant="link" icon={<PlusCircleIcon />}>
+        Link aria disabled
+      </Button>
+      <Button isAriaDisabled variant="link" isInline>
+        Inline link aria disabled
+      </Button>
+      <Button variant="link" isDanger isAriaDisabled>
+        Danger link disabled
+      </Button>
+      <Button isAriaDisabled variant="plain" aria-label="Action">
+        <TimesIcon />
+      </Button>
+      <Button isAriaDisabled variant="control">
+        Control aria disabled
+      </Button>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/components/Button/examples/ButtonAriaDisabledLinkTooltip.tsx b/packages/react-core/src/components/Button/examples/ButtonAriaDisabledLinkTooltip.tsx
new file mode 100644
index 00000000000..68acdfe15ec
--- /dev/null
+++ b/packages/react-core/src/components/Button/examples/ButtonAriaDisabledLinkTooltip.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Button, Tooltip } from '@patternfly/react-core';
+
+export const ButtonAriaDisabledLinkTooltip: React.FunctionComponent = () => (
+  <Tooltip content="Aria-disabled link as button with tooltip">
+    <Button component="a" isAriaDisabled href="https://pf4.patternfly.org/" target="_blank" variant="tertiary">
+      Tertiary link as button to core docs
+    </Button>
+  </Tooltip>
+);
diff --git a/packages/react-core/src/components/Button/examples/ButtonAriaDisabledTooltip.tsx b/packages/react-core/src/components/Button/examples/ButtonAriaDisabledTooltip.tsx
new file mode 100644
index 00000000000..24c35bb1965
--- /dev/null
+++ b/packages/react-core/src/components/Button/examples/ButtonAriaDisabledTooltip.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Button, Tooltip } from '@patternfly/react-core';
+
+export const ButtonAriaDisabledTooltip: React.FunctionComponent = () => (
+  <Tooltip content="Aria-disabled buttons are like disabled buttons, but focusable. Allows for tooltip support.">
+    <Button isAriaDisabled variant="secondary">
+      Secondary button to core docs
+    </Button>
+  </Tooltip>
+);
diff --git a/packages/react-core/src/components/Button/examples/ButtonBlock.tsx b/packages/react-core/src/components/Button/examples/ButtonBlock.tsx
new file mode 100644
index 00000000000..69d484378df
--- /dev/null
+++ b/packages/react-core/src/components/Button/examples/ButtonBlock.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+
+export const ButtonBlock: React.FunctionComponent = () => <Button isBlock>Block level button</Button>;
diff --git a/packages/react-core/src/components/Button/examples/ButtonCallToAction.tsx b/packages/react-core/src/components/Button/examples/ButtonCallToAction.tsx
new file mode 100644
index 00000000000..efdf1ffcd35
--- /dev/null
+++ b/packages/react-core/src/components/Button/examples/ButtonCallToAction.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Button, Flex } from '@patternfly/react-core';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
+
+export const ButtonCallToAction: React.FunctionComponent = () => (
+  <Flex>
+    <Button variant="primary" isLarge>
+      Call to action
+    </Button>
+    <Button variant="secondary" isLarge>
+      Call to action
+    </Button>
+    <Button variant="tertiary" isLarge>
+      Call to action
+    </Button>
+    <Button variant="link" isLarge>
+      Call to action <ArrowRightIcon />
+    </Button>
+  </Flex>
+);
diff --git a/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx b/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx
new file mode 100644
index 00000000000..b9d421240c1
--- /dev/null
+++ b/packages/react-core/src/components/Button/examples/ButtonDisabled.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button, Flex } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+
+export const ButtonDisabled: React.FunctionComponent = () => (
+  <Flex direction={{ default: 'column' }}>
+    <Flex>
+      <Button isDisabled>Primary disabled</Button>
+      <Button isDisabled>Secondary disabled</Button>
+      <Button variant="secondary" isDanger isDisabled>
+        Danger secondary disabled
+      </Button>
+      <Button isDisabled variant="tertiary">
+        Tertiary disabled
+      </Button>
+      <Button isDisabled variant="danger">
+        Danger disabled
+      </Button>
+      <Button isDisabled variant="warning">
+        Warning disabled
+      </Button>
+    </Flex>
+
+    <Flex>
+      <Button isDisabled variant="link" icon={<PlusCircleIcon />}>
+        Link disabled
+      </Button>
+      <Button isDisabled variant="link" isInline>
+        Inline link disabled
+      </Button>
+      <Button variant="link" isDanger isDisabled>
+        Danger link disabled
+      </Button>
+      <Button isDisabled variant="plain" aria-label="Action">
+        <TimesIcon />
+      </Button>
+      <Button isDisabled variant="control">
+        Control disabled
+      </Button>
+    </Flex>
+  </Flex>
+);
diff --git a/packages/react-core/src/components/Button/examples/ButtonInlineSpanLink.tsx b/packages/react-core/src/components/Button/examples/ButtonInlineSpanLink.tsx
new file mode 100644
index 00000000000..25ac07115bc
--- /dev/null
+++ b/packages/react-core/src/components/Button/examples/ButtonInlineSpanLink.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+
+const handleKeydown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+  const { key } = event;
+  const isEnterKey: boolean = key === 'Enter';
+  const isEnterOrSpaceKey: boolean = isEnterKey || key === 'Space';
+
+  if (isEnterOrSpaceKey) {
+    event.preventDefault();
+    alert(`${isEnterKey ? 'Enter' : 'Space'} key default behavior stopped by onKeyDown`);
+  }
+};
+
+export const ButtonInlineSpanLink: React.FunctionComponent = () => (
+  <>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      <Button variant="link" isInline component="span">
+        This is long button text that needs to be a span so that it will wrap inline with the text around it.
+      </Button>
+      Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum velit elementum non.
+    </p>
+
+    <br />
+
+    <p>
+      Note that using a <b>span</b> as a button does not fire the <b>onclick</b> event for Enter or Space keys.
+      <Button variant="link" isInline component="span" onKeyDown={handleKeydown}>
+        An <b>onKeyDown</b> event listener is needed for Enter and Space key presses to prevent their default behavior
+        and trigger your code.
+      </Button>
+      Pressing the Enter or Space keys on the inline link as span above demonstrates this by triggering an alert.
+    </p>
+  </>
+);
diff --git a/packages/react-core/src/components/Button/examples/ButtonLinks.tsx b/packages/react-core/src/components/Button/examples/ButtonLinks.tsx
new file mode 100644
index 00000000000..c6f7334e31f
--- /dev/null
+++ b/packages/react-core/src/components/Button/examples/ButtonLinks.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Button, Flex } from '@patternfly/react-core';
+
+export const ButtonLinks: React.FunctionComponent = () => (
+  <Flex>
+    <Button component="a" href="https://pf4.patternfly.org/" target="_blank" variant="primary">
+      Link to core docs
+    </Button>
+    <Button component="a" href="https://pf4.patternfly.org/" target="_blank" variant="secondary">
+      Secondary link to core docs
+    </Button>
+    <Button isDisabled component="a" href="https://pf4.patternfly.org/" target="_blank" variant="tertiary">
+      Tertiary link to core docs
+    </Button>
+    <Button component="a" href="https://pf4.patternfly.org/contribution/#modifiers" variant="link">
+      Jump to modifiers in contribution guidelines
+    </Button>
+  </Flex>
+);
diff --git a/packages/react-core/src/components/Button/examples/ButtonProgress.tsx b/packages/react-core/src/components/Button/examples/ButtonProgress.tsx
new file mode 100644
index 00000000000..a0243494431
--- /dev/null
+++ b/packages/react-core/src/components/Button/examples/ButtonProgress.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Button, Flex } from '@patternfly/react-core';
+
+export const ButtonProgress: React.FunctionComponent = () => {
+  const [isPrimaryLoading, setIsPrimaryLoading] = React.useState<boolean>(true);
+  const [isSecondaryLoading, setIsSecondaryLoading] = React.useState<boolean>(true);
+
+  return (
+    <Flex>
+      <Button
+        isLoading={isPrimaryLoading}
+        variant="primary"
+        onClick={() => setIsPrimaryLoading(!isPrimaryLoading)}
+        {...(isPrimaryLoading && { spinnerAriaValueText: 'Loading' })}
+      >
+        {isPrimaryLoading ? 'Click to stop loading' : 'Click to start loading'}
+      </Button>
+
+      <Button
+        isLoading={isSecondaryLoading}
+        variant="secondary"
+        onClick={() => setIsSecondaryLoading(!isSecondaryLoading)}
+        {...(isSecondaryLoading && { spinnerAriaValueText: 'Loading' })}
+      >
+        {isSecondaryLoading ? 'Click to stop loading' : 'Click to start loading'}
+      </Button>
+    </Flex>
+  );
+};
diff --git a/packages/react-core/src/components/Button/examples/ButtonRouterLink.tsx b/packages/react-core/src/components/Button/examples/ButtonRouterLink.tsx
new file mode 100644
index 00000000000..20f4246de17
--- /dev/null
+++ b/packages/react-core/src/components/Button/examples/ButtonRouterLink.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Link } from '@reach/router';
+
+export const ButtonRouterLink: React.FunctionComponent = () => (
+  <Button variant="link" component={(props: any) => <Link {...props} to="#" />}>
+    Router link
+  </Button>
+);
diff --git a/packages/react-core/src/components/Button/examples/ButtonSmall.tsx b/packages/react-core/src/components/Button/examples/ButtonSmall.tsx
new file mode 100644
index 00000000000..26e21960fe5
--- /dev/null
+++ b/packages/react-core/src/components/Button/examples/ButtonSmall.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button, Flex } from '@patternfly/react-core';
+
+export const ButtonSmall: React.FunctionComponent = () => (
+  <Flex>
+    <Button variant="primary" isSmall>
+      Primary
+    </Button>
+    <Button variant="secondary" isSmall>
+      Secondary
+    </Button>
+    <Button variant="tertiary" isSmall>
+      Tertiary
+    </Button>
+    <Button variant="danger" isSmall>
+      Danger
+    </Button>
+    <Button variant="warning" isSmall>
+      Warning
+    </Button>
+  </Flex>
+);
diff --git a/packages/react-core/src/components/Button/examples/ButtonTypes.tsx b/packages/react-core/src/components/Button/examples/ButtonTypes.tsx
new file mode 100644
index 00000000000..51cb5ae3f9d
--- /dev/null
+++ b/packages/react-core/src/components/Button/examples/ButtonTypes.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Button, Flex } from '@patternfly/react-core';
+
+export const ButtonTypes: React.FunctionComponent = () => (
+  <Flex>
+    <Button type="submit">Submit</Button>
+    <Button type="reset">Reset</Button>
+    <Button>Default</Button>
+  </Flex>
+);
diff --git a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx
new file mode 100644
index 00000000000..2bcba2abca3
--- /dev/null
+++ b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Button, Flex } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+
+export const ButtonVariations: React.FunctionComponent = () => (
+  <Flex direction={{ default: 'column' }} alignItems={{ default: 'alignItemsFlexStart' }}>
+    <Flex>
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="secondary" isDanger>
+        Danger Secondary
+      </Button>
+      <Button variant="tertiary">Tertiary</Button>
+      <Button variant="danger">Danger</Button>
+      <Button variant="warning">Warning</Button>
+    </Flex>
+
+    <Flex>
+      <Button variant="link" icon={<PlusCircleIcon />}>
+        Link
+      </Button>
+      <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
+        Link
+      </Button>
+      <Button variant="link" isInline>
+        Inline link
+      </Button>
+      <Button variant="link" isDanger>
+        Danger link
+      </Button>
+    </Flex>
+
+    <Button variant="plain" aria-label="Action">
+      <TimesIcon />
+    </Button>
+
+    <Flex>
+      <Button variant="control">Control</Button>
+      <Button variant="control" aria-label="Copy">
+        <CopyIcon />
+      </Button>
+    </Flex>
+  </Flex>
+);