diff --git a/packages/react-core/index.d.ts b/packages/react-core/index.d.ts
new file mode 100644
index 00000000000..cdb2b1a9a23
--- /dev/null
+++ b/packages/react-core/index.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
diff --git a/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx b/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx
index 39517dc90f6..c29cb0b7819 100644
--- a/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx
+++ b/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx
@@ -9,7 +9,7 @@ interface AlertInfo {
 
 export const AsyncLiveRegionAlert: React.FunctionComponent = () => {
   const [alerts, setAlerts] = React.useState<AlertInfo[]>([]);
-  const [isActive, setIsActive] = React.useState<boolean>(false);
+  const [isActive, setIsActive] = React.useState(false);
   const getUniqueId: () => number = () => new Date().getTime();
 
   const addAlert = (alertInfo: AlertInfo) => {
diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md
index a008f00bf58..db5d30e9e52 100644
--- a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md
+++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncher.md
@@ -8,7 +8,7 @@ ouia: true
 
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import { Link } from '@reach/router';
-import pfIcon from './pf-logo-small.svg';
+import pfLogoSm from './pf-logo-small.svg';
 
 Note: Application launcher is built on Dropdown, for extended API go to [Dropdown](/documentation/react/components/dropdown) documentation.
 To add a tooltip, use the `tooltip` prop and optionally add more tooltip props by using `tooltipProps`. For more tooltip information go to [Tooltip](/documentation/react/components/tooltip).
@@ -17,616 +17,50 @@ To add a tooltip, use the `tooltip` prop and optionally add more tooltip props b
 
 ### Basic
 
-```js
-import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
-
-class SimpleApplicationLauncher extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-  }
-
-  render() {
-    const { isOpen } = this.state;
-    const appLauncherItems = [
-      <ApplicationLauncherItem key="application_1a" href="#">
-        Application 1 (anchor link)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-        Application 2 (button with onClick)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
-        Unavailable application
-      </ApplicationLauncherItem>
-    ];
-    return (
-      <ApplicationLauncher onSelect={this.onSelect} onToggle={this.onToggle} isOpen={isOpen} items={appLauncherItems} />
-    );
-  }
-}
+```ts file="./ApplicationLauncherBasic.tsx"
 ```
 
 ### Router link
 
-```js
-import React from 'react';
-import { Link } from '@reach/router';
-import { ApplicationLauncher, ApplicationLauncherItem, ApplicationLauncherContent, Text } from '@patternfly/react-core';
-
-class SimpleApplicationLauncher extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-  }
-
-  render() {
-    const { isOpen } = this.state;
-    const icon = <img src={pfIcon} />;
-    const exampleStyle = {
-      color: 'var(--pf-c-app-launcher__menu-item--Color)',
-      textDecoration: 'none'
-    };
-    const appLauncherItems = [
-      <ApplicationLauncherItem
-        key="router1"
-        component={
-          <Link to="/" style={exampleStyle}>
-            @reach/router Link
-          </Link>
-        }
-      />,
-      <ApplicationLauncherItem
-        key="router2"
-        isExternal
-        icon={icon}
-        component={
-          <Link to="/" style={exampleStyle}>
-            <ApplicationLauncherContent>@reach/router Link with icon</ApplicationLauncherContent>
-          </Link>
-        }
-      />,
-      <ApplicationLauncherItem key="application_1a" href="#">
-        Application 1 (anchor link)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-        Application 2 (button with onClick)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
-        Unavailable application
-      </ApplicationLauncherItem>
-    ];
-    return (
-      <ApplicationLauncher onSelect={this.onSelect} onToggle={this.onToggle} isOpen={isOpen} items={appLauncherItems} />
-    );
-  }
-}
+```ts file="./ApplicationLauncherRouterLink.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
-
-class SimpleApplicationLauncher extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-  }
-
-  render() {
-    const { isOpen } = this.state;
-    const appLauncherItems = [
-      <ApplicationLauncherItem key="application_1a" href="#">
-        Application 1 (anchor link)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-        Application 2 (button with onClick)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
-        Unavailable application
-      </ApplicationLauncherItem>
-    ];
-    return (
-      <ApplicationLauncher
-        onSelect={this.onSelect}
-        onToggle={this.onToggle}
-        isOpen={isOpen}
-        items={appLauncherItems}
-        isDisabled
-      />
-    );
-  }
-}
+```ts file="./ApplicationLauncherDisabled.tsx"
 ```
 
 ### Aligned right
 
-```js
-import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
-import { DropdownPosition } from '../Dropdown';
-
-class SimpleApplicationLauncher extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-  }
-
-  render() {
-    const { isOpen } = this.state;
-    const appLauncherItems = [
-      <ApplicationLauncherItem key="application_1a" href="#">
-        Application 1 (anchor link)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-        Application 2 (button with onClick)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
-        Unavailable application
-      </ApplicationLauncherItem>
-    ];
-    const style = { marginLeft: 'calc(100% - 46px)' };
-    return (
-      <ApplicationLauncher
-        onSelect={this.onSelect}
-        onToggle={this.onToggle}
-        isOpen={isOpen}
-        items={appLauncherItems}
-        position={DropdownPosition.right}
-        style={style}
-      />
-    );
-  }
-}
+```ts file="./ApplicationLauncherAlignRight.tsx"
 ```
 
 ### Aligned top
 
-```js
-import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
-import { DropdownDirection } from '../Dropdown';
-
-class SimpleApplicationLauncher extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-  }
-
-  render() {
-    const { isOpen } = this.state;
-    const appLauncherItems = [
-      <ApplicationLauncherItem key="application_1a" href="#">
-        Application 1 (anchor link)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-        Application 2 (button with onClick)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
-        Unavailable application
-      </ApplicationLauncherItem>
-    ];
-    return (
-      <ApplicationLauncher
-        onSelect={this.onSelect}
-        onToggle={this.onToggle}
-        isOpen={isOpen}
-        items={appLauncherItems}
-        direction={DropdownDirection.up}
-      />
-    );
-  }
-}
+```ts file="./ApplicationLauncherAlignTop.tsx"
 ```
 
 ### With tooltip
 
-```js
-import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
-
-class TooltipApplicationLauncher extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-  }
-
-  render() {
-    const { isOpen } = this.state;
-    const appLauncherItems = [
-      <ApplicationLauncherItem key="application_1b" href="#" tooltip={<div>Launch Application 1</div>}>
-        Application 1 (anchor link)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem
-        key="application_2b"
-        component="button"
-        tooltip={<div>Launch Application 2</div>}
-        tooltipProps={{ position: 'right' }}
-        onClick={() => alert('Clicked item 2')}
-      >
-        Application 2 (onClick)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem
-        key="application_3b"
-        component="button"
-        tooltip={<div>Launch Application 3</div>}
-        tooltipProps={{ position: 'bottom' }}
-        onClick={() => alert('Clicked item 3')}
-      >
-        Application 3 (onClick)
-      </ApplicationLauncherItem>
-    ];
-    return (
-      <ApplicationLauncher onSelect={this.onSelect} onToggle={this.onToggle} isOpen={isOpen} items={appLauncherItems} />
-    );
-  }
-}
+```ts file="./ApplicationLauncherTooltip.tsx"
 ```
 
 ### With sections and icons
 
-```js
-import React from 'react';
-import {
-  ApplicationLauncher,
-  ApplicationLauncherItem,
-  ApplicationLauncherGroup,
-  ApplicationLauncherSeparator
-} from '@patternfly/react-core';
-import pfIcon from './examples/pf-logo-small.svg';
-
-class ApplicationLauncherSections extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-  }
-
-  render() {
-    const { isOpen } = this.state;
-    const icon = <img src={pfIcon} />;
-    const appLauncherItems = [
-      <ApplicationLauncherGroup key="group 1c">
-        <ApplicationLauncherItem key="group 1a" icon={icon}>
-          Item without group title
-        </ApplicationLauncherItem>
-        <ApplicationLauncherSeparator key="separator" />
-      </ApplicationLauncherGroup>,
-      <ApplicationLauncherGroup label="Group 2" key="group 2c">
-        <ApplicationLauncherItem key="group 2a" isExternal icon={icon} component="button">
-          Group 2 button
-        </ApplicationLauncherItem>
-        <ApplicationLauncherItem key="group 2b" isExternal href="#" icon={icon}>
-          Group 2 anchor link
-        </ApplicationLauncherItem>
-        <ApplicationLauncherSeparator key="separator" />
-      </ApplicationLauncherGroup>,
-      <ApplicationLauncherGroup label="Group 3" key="group 3c">
-        <ApplicationLauncherItem key="group 3a" isExternal icon={icon} component="button">
-          Group 3 button
-        </ApplicationLauncherItem>
-        <ApplicationLauncherItem key="group 3b" isExternal href="#" icon={icon}>
-          Group 3 anchor link
-        </ApplicationLauncherItem>
-      </ApplicationLauncherGroup>
-    ];
-    return (
-      <ApplicationLauncher
-        onSelect={this.onSelect}
-        onToggle={this.onToggle}
-        isOpen={isOpen}
-        items={appLauncherItems}
-        isGrouped
-      />
-    );
-  }
-}
+```ts file="./ApplicationLauncherSectionsAndIcons.tsx"
 ```
 
 ### With favorites and search
 
-```js
-import React from 'react';
-import {
-  ApplicationLauncher,
-  ApplicationLauncherItem,
-  ApplicationLauncherGroup,
-  ApplicationLauncherSeparator
-} from '@patternfly/react-core';
-import pfIcon from './examples/pf-logo-small.svg';
-
-class ApplicationLauncherFavorites extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false,
-      favorites: [],
-      filteredItems: null
-    };
-
-    const icon = <img src={pfIcon} />;
-    this.appLauncherItems = [
-      <ApplicationLauncherGroup key="group 1c">
-        <ApplicationLauncherItem key="group 1a" id="item-1" icon={icon}>
-          Item without group title
-        </ApplicationLauncherItem>
-        <ApplicationLauncherSeparator key="separator" />
-      </ApplicationLauncherGroup>,
-      <ApplicationLauncherGroup label="Group 2" key="group 2c">
-        <ApplicationLauncherItem key="group 2a" id="item-2" isExternal icon={icon} component="button">
-          Group 2 button
-        </ApplicationLauncherItem>
-        <ApplicationLauncherItem key="group 2b" id="item-3" isExternal href="#" icon={icon}>
-          Group 2 anchor link
-        </ApplicationLauncherItem>
-        <ApplicationLauncherSeparator key="separator" />
-      </ApplicationLauncherGroup>,
-      <ApplicationLauncherGroup label="Group 3" key="group 3c">
-        <ApplicationLauncherItem key="group 3a" id="item-4" isExternal icon={icon} component="button">
-          Group 3 button
-        </ApplicationLauncherItem>
-        <ApplicationLauncherItem key="group 3b" id="item-5" isExternal href="#" icon={icon}>
-          Group 3 anchor link
-        </ApplicationLauncherItem>
-      </ApplicationLauncherGroup>
-    ];
-
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-    this.onFavorite = (itemId, isFavorite) => {
-      if (isFavorite) {
-        this.setState({
-          favorites: this.state.favorites.filter(id => id !== itemId)
-        });
-      } else
-        this.setState({
-          favorites: [...this.state.favorites, itemId]
-        });
-    };
-    this.onSearch = textInput => {
-      if (textInput === '') {
-        this.setState({
-          filteredItems: null
-        });
-      } else {
-        let filteredGroups = this.appLauncherItems
-          .map(group => {
-            let filteredGroup = React.cloneElement(group, {
-              children: group.props.children.filter(item => {
-                if (item.type === ApplicationLauncherSeparator) return item;
-                return item.props.children.toLowerCase().includes(textInput.toLowerCase());
-              })
-            });
-            if (
-              filteredGroup.props.children.length > 0 &&
-              filteredGroup.props.children[0].type !== ApplicationLauncherSeparator
-            )
-              return filteredGroup;
-          })
-          .filter(newGroup => newGroup);
-
-        if (filteredGroups.length > 0) {
-          let lastGroup = filteredGroups.pop();
-          lastGroup = React.cloneElement(lastGroup, {
-            children: lastGroup.props.children.filter(item => item.type !== ApplicationLauncherSeparator)
-          });
-          filteredGroups.push(lastGroup);
-        }
-
-        this.setState({
-          filteredItems: filteredGroups
-        });
-      }
-    };
-  }
-
-  render() {
-    const { isOpen, favorites, filteredItems } = this.state;
-    return (
-      <ApplicationLauncher
-        onToggle={this.onToggle}
-        onFavorite={this.onFavorite}
-        onSearch={this.onSearch}
-        isOpen={isOpen}
-        items={filteredItems || this.appLauncherItems}
-        favorites={favorites}
-        isGrouped
-      />
-    );
-  }
-}
+```ts file="./ApplicationLauncherFavoritesAndSearch.tsx"
 ```
 
 ### With custom icon
 
-```js
-import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-
-class ApplicationLauncheIcon extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-  }
-
-  render() {
-    const { isOpen } = this.state;
-    const appLauncherItems = [
-      <ApplicationLauncherItem key="application_1a" href="#">
-        Application 1 (anchor link)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-        Application 2 (button with onClick)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
-        Unavailable application
-      </ApplicationLauncherItem>
-    ];
-    return (
-      <ApplicationLauncher
-        onSelect={this.onSelect}
-        onToggle={this.onToggle}
-        isOpen={isOpen}
-        items={appLauncherItems}
-        toggleIcon={<HelpIcon />}
-      />
-    );
-  }
-}
+```ts file="./ApplicationLauncherCustomIcon.tsx"
 ```
 
 ### Basic with menu appended to document body
 
-```js
-import React from 'react';
-import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
-
-class ApplicationLauncherDocumentBody extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isOpen: !this.state.isOpen
-      });
-    };
-  }
-
-  render() {
-    const { isOpen } = this.state;
-    const appLauncherItems = [
-      <ApplicationLauncherItem key="application_1a" href="#">
-        Application 1 (anchor link)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
-        Application 2 (button with onClick)
-      </ApplicationLauncherItem>,
-      <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
-        Unavailable application
-      </ApplicationLauncherItem>
-    ];
-    return (
-      <ApplicationLauncher
-        menuAppendTo={() => document.body}
-        onSelect={this.onSelect}
-        onToggle={this.onToggle}
-        isOpen={isOpen}
-        items={appLauncherItems}
-      />
-    );
-  }
-}
+```ts file="./ApplicationLauncherDocumentBody.tsx"
 ```
diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx
new file mode 100644
index 00000000000..ecac04ea546
--- /dev/null
+++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignRight.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { ApplicationLauncher, ApplicationLauncherItem, DropdownPosition } from '@patternfly/react-core';
+
+const appLauncherItems: React.ReactElement[] = [
+  <ApplicationLauncherItem key="application_1a" href="#">
+    Application 1 (anchor link)
+  </ApplicationLauncherItem>,
+  <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
+    Application 2 (button with onClick)
+  </ApplicationLauncherItem>,
+  <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
+    Unavailable application
+  </ApplicationLauncherItem>
+];
+
+export const ApplicationLauncherAlignRight: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
+
+  return (
+    <ApplicationLauncher
+      onSelect={onSelect}
+      onToggle={onToggle}
+      isOpen={isOpen}
+      items={appLauncherItems}
+      position={DropdownPosition.right}
+      style={{ marginLeft: 'calc(100% - 46px)' }}
+    />
+  );
+};
diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx
new file mode 100644
index 00000000000..5bf16cca2c6
--- /dev/null
+++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherAlignTop.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { ApplicationLauncher, ApplicationLauncherItem, DropdownDirection } from '@patternfly/react-core';
+
+const appLauncherItems: React.ReactElement[] = [
+  <ApplicationLauncherItem key="application_1a" href="#">
+    Application 1 (anchor link)
+  </ApplicationLauncherItem>,
+  <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
+    Application 2 (button with onClick)
+  </ApplicationLauncherItem>,
+  <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
+    Unavailable application
+  </ApplicationLauncherItem>
+];
+
+export const ApplicationLauncherAlignTop: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
+
+  return (
+    <ApplicationLauncher
+      onSelect={onSelect}
+      onToggle={onToggle}
+      isOpen={isOpen}
+      items={appLauncherItems}
+      direction={DropdownDirection.up}
+    />
+  );
+};
diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx
new file mode 100644
index 00000000000..ca4f6cc4422
--- /dev/null
+++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherBasic.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
+
+const appLauncherItems: React.ReactElement[] = [
+  <ApplicationLauncherItem key="application_1a" href="#">
+    Application 1 (anchor link)
+  </ApplicationLauncherItem>,
+  <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
+    Application 2 (button with onClick)
+  </ApplicationLauncherItem>,
+  <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
+    Unavailable application
+  </ApplicationLauncherItem>
+];
+
+export const ApplicationLauncherBasic: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
+
+  return <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} />;
+};
diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx
new file mode 100644
index 00000000000..a240888c483
--- /dev/null
+++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherCustomIcon.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+const appLauncherItems: React.ReactElement[] = [
+  <ApplicationLauncherItem key="application_1a" href="#">
+    Application 1 (anchor link)
+  </ApplicationLauncherItem>,
+  <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
+    Application 2 (button with onClick)
+  </ApplicationLauncherItem>,
+  <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
+    Unavailable application
+  </ApplicationLauncherItem>
+];
+
+export const ApplicationLauncherCustomIcon: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
+
+  return (
+    <ApplicationLauncher
+      onSelect={onSelect}
+      onToggle={onToggle}
+      isOpen={isOpen}
+      items={appLauncherItems}
+      toggleIcon={<HelpIcon />}
+    />
+  );
+};
diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherDisabled.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherDisabled.tsx
new file mode 100644
index 00000000000..cc2d7dbf249
--- /dev/null
+++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherDisabled.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
+
+const appLauncherItems: React.ReactElement[] = [
+  <ApplicationLauncherItem key="application_1a" href="#">
+    Application 1 (anchor link)
+  </ApplicationLauncherItem>,
+  <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
+    Application 2 (button with onClick)
+  </ApplicationLauncherItem>,
+  <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
+    Unavailable application
+  </ApplicationLauncherItem>
+];
+
+export const ApplicationLauncherDisabled: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
+
+  return (
+    <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} isDisabled />
+  );
+};
diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherDocumentBody.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherDocumentBody.tsx
new file mode 100644
index 00000000000..8c86d7bd4f4
--- /dev/null
+++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherDocumentBody.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
+
+const appLauncherItems: React.ReactElement[] = [
+  <ApplicationLauncherItem key="application_1a" href="#">
+    Application 1 (anchor link)
+  </ApplicationLauncherItem>,
+  <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
+    Application 2 (button with onClick)
+  </ApplicationLauncherItem>,
+  <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
+    Unavailable application
+  </ApplicationLauncherItem>
+];
+
+export const ApplicationLauncherDocumentBody: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
+
+  return (
+    <ApplicationLauncher
+      menuAppendTo={() => document.body}
+      onSelect={onSelect}
+      onToggle={onToggle}
+      isOpen={isOpen}
+      items={appLauncherItems}
+    />
+  );
+};
diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx
new file mode 100644
index 00000000000..b8c255369fe
--- /dev/null
+++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherFavoritesAndSearch.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import {
+  ApplicationLauncher,
+  ApplicationLauncherItem,
+  ApplicationLauncherGroup,
+  ApplicationLauncherSeparator
+} from '@patternfly/react-core';
+import pfLogoSm from './pf-logo-small.svg';
+
+const icon: JSX.Element = <img src={pfLogoSm} />;
+
+const appLauncherItems: React.ReactElement[] = [
+  <ApplicationLauncherGroup key="group 1c">
+    <ApplicationLauncherItem key="group 1a" id="item-1" icon={icon}>
+      Item without group title
+    </ApplicationLauncherItem>
+    <ApplicationLauncherSeparator key="separator" />
+  </ApplicationLauncherGroup>,
+  <ApplicationLauncherGroup label="Group 2" key="group 2c">
+    <ApplicationLauncherItem key="group 2a" id="item-2" isExternal icon={icon} component="button">
+      Group 2 button
+    </ApplicationLauncherItem>
+    <ApplicationLauncherItem key="group 2b" id="item-3" isExternal href="#" icon={icon}>
+      Group 2 anchor link
+    </ApplicationLauncherItem>
+    <ApplicationLauncherSeparator key="separator" />
+  </ApplicationLauncherGroup>,
+  <ApplicationLauncherGroup label="Group 3" key="group 3c">
+    <ApplicationLauncherItem key="group 3a" id="item-4" isExternal icon={icon} component="button">
+      Group 3 button
+    </ApplicationLauncherItem>
+    <ApplicationLauncherItem key="group 3b" id="item-5" isExternal href="#" icon={icon}>
+      Group 3 anchor link
+    </ApplicationLauncherItem>
+  </ApplicationLauncherGroup>
+];
+
+export const ApplicationLauncherFavoritesAndSearch: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [favorites, setFavorites] = React.useState<string[]>([]);
+  const [filteredItems, setFilteredItems] = React.useState<React.ReactNode[]>(null);
+
+  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+
+  const onFavorite = (itemId: string, isFavorite: boolean) => {
+    let updatedFavorites: string[] = [...favorites, itemId];
+
+    if (isFavorite) {
+      updatedFavorites = favorites.filter(id => id !== itemId);
+    }
+
+    setFavorites(updatedFavorites);
+  };
+
+  const onSearch = (textInput: string) => {
+    if (textInput === '') {
+      setFilteredItems(null);
+    } else {
+      const filteredGroups = appLauncherItems
+        .map((group: React.ReactElement) => {
+          const filteredGroup = React.cloneElement(group, {
+            children: group.props.children.filter((item: React.ReactElement) => {
+              if (item.type === ApplicationLauncherSeparator) {
+                return item;
+              }
+
+              return item.props.children.toLowerCase().includes(textInput.toLowerCase());
+            })
+          });
+
+          if (
+            filteredGroup.props.children.length > 0 &&
+            filteredGroup.props.children[0].type !== ApplicationLauncherSeparator
+          ) {
+            return filteredGroup;
+          }
+        })
+        .filter(newGroup => newGroup);
+
+      if (filteredGroups.length > 0) {
+        let lastGroup = filteredGroups.pop();
+
+        lastGroup = React.cloneElement(lastGroup, {
+          children: lastGroup.props.children.filter(item => item.type !== ApplicationLauncherSeparator)
+        });
+
+        filteredGroups.push(lastGroup);
+      }
+
+      setFilteredItems(filteredGroups);
+    }
+  };
+
+  return (
+    <ApplicationLauncher
+      onToggle={onToggle}
+      onFavorite={onFavorite}
+      onSearch={onSearch}
+      isOpen={isOpen}
+      items={filteredItems || appLauncherItems}
+      favorites={favorites}
+      isGrouped
+    />
+  );
+};
diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx
new file mode 100644
index 00000000000..39ad96e7fed
--- /dev/null
+++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherRouterLink.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Link } from '@reach/router';
+import { ApplicationLauncher, ApplicationLauncherItem, ApplicationLauncherContent } from '@patternfly/react-core';
+import pfLogoSm from './pf-logo-small.svg';
+
+const icon: JSX.Element = <img src={pfLogoSm} />;
+
+const linkStyle: React.CSSProperties = {
+  color: 'var(--pf-c-app-launcher__menu-item--Color)',
+  textDecoration: 'none'
+};
+
+const appLauncherItems: React.ReactElement[] = [
+  <ApplicationLauncherItem
+    key="router1"
+    component={
+      <Link to="/" style={linkStyle}>
+        @reach/router Link
+      </Link>
+    }
+  />,
+  <ApplicationLauncherItem
+    key="router2"
+    isExternal
+    icon={icon}
+    component={
+      <Link to="/" style={linkStyle}>
+        <ApplicationLauncherContent>@reach/router Link with icon</ApplicationLauncherContent>
+      </Link>
+    }
+  />,
+  <ApplicationLauncherItem key="application_1a" href="#">
+    Application 1 (anchor link)
+  </ApplicationLauncherItem>,
+  <ApplicationLauncherItem key="application_2a" component="button" onClick={() => alert('Clicked item 2')}>
+    Application 2 (button with onClick)
+  </ApplicationLauncherItem>,
+  <ApplicationLauncherItem key="disabled_application_4a" isDisabled>
+    Unavailable application
+  </ApplicationLauncherItem>
+];
+
+export const ApplicationLauncherRouterLink: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
+
+  return <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} />;
+};
diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx
new file mode 100644
index 00000000000..1e08c340dd1
--- /dev/null
+++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherSectionsAndIcons.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import {
+  ApplicationLauncher,
+  ApplicationLauncherItem,
+  ApplicationLauncherGroup,
+  ApplicationLauncherSeparator
+} from '@patternfly/react-core';
+import pfLogoSm from './pf-logo-small.svg';
+
+const icon = <img src={pfLogoSm} />;
+
+const appLauncherItems: React.ReactElement[] = [
+  <ApplicationLauncherGroup key="group 1c">
+    <ApplicationLauncherItem key="group 1a" icon={icon}>
+      Item without group title
+    </ApplicationLauncherItem>
+    <ApplicationLauncherSeparator key="separator" />
+  </ApplicationLauncherGroup>,
+  <ApplicationLauncherGroup label="Group 2" key="group 2c">
+    <ApplicationLauncherItem key="group 2a" isExternal icon={icon} component="button">
+      Group 2 button
+    </ApplicationLauncherItem>
+    <ApplicationLauncherItem key="group 2b" isExternal href="#" icon={icon}>
+      Group 2 anchor link
+    </ApplicationLauncherItem>
+    <ApplicationLauncherSeparator key="separator" />
+  </ApplicationLauncherGroup>,
+  <ApplicationLauncherGroup label="Group 3" key="group 3c">
+    <ApplicationLauncherItem key="group 3a" isExternal icon={icon} component="button">
+      Group 3 button
+    </ApplicationLauncherItem>
+    <ApplicationLauncherItem key="group 3b" isExternal href="#" icon={icon}>
+      Group 3 anchor link
+    </ApplicationLauncherItem>
+  </ApplicationLauncherGroup>
+];
+
+export const ApplicationLauncherSectionsAndIcons: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
+
+  return (
+    <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} isGrouped />
+  );
+};
diff --git a/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx
new file mode 100644
index 00000000000..77b188c7d62
--- /dev/null
+++ b/packages/react-core/src/components/ApplicationLauncher/examples/ApplicationLauncherTooltip.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { ApplicationLauncher, ApplicationLauncherItem } from '@patternfly/react-core';
+
+const appLauncherItems: React.ReactElement[] = [
+  <ApplicationLauncherItem key="application_1b" href="#" tooltip={<div>Launch Application 1</div>}>
+    Application 1 (anchor link)
+  </ApplicationLauncherItem>,
+  <ApplicationLauncherItem
+    key="application_2b"
+    component="button"
+    tooltip={<div>Launch Application 2</div>}
+    tooltipProps={{ position: 'right' }}
+    onClick={() => alert('Clicked item 2')}
+  >
+    Application 2 (onClick)
+  </ApplicationLauncherItem>,
+  <ApplicationLauncherItem
+    key="application_3b"
+    component="button"
+    tooltip={<div>Launch Application 3</div>}
+    tooltipProps={{ position: 'bottom' }}
+    onClick={() => alert('Clicked item 3')}
+  >
+    Application 3 (onClick)
+  </ApplicationLauncherItem>
+];
+
+export const ApplicationLauncherTooltip: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = (isOpen: boolean) => setIsOpen(isOpen);
+  const onSelect = (_event: any) => setIsOpen(prevIsOpen => !prevIsOpen);
+
+  return <ApplicationLauncher onSelect={onSelect} onToggle={onToggle} isOpen={isOpen} items={appLauncherItems} />;
+};