Added back and repurposed router examples

Author: Eric Olkowski

packages/react-core/src/components/Button/examples/Button.md

@@ -85,6 +85,13 @@ Inline links should use `component="span"` and the `isInline` property to wrap i
 ```ts file="./ButtonInlineSpanLink.tsx"
 ```
 
+### Custom component
+
+In addition to being able to pass a string to the `component` property, you can provide more fine-tuned customization by passing a callback that returns a component.
+
+```ts file="./ButtonCustomComponent.tsx"
+```
+
 ### Aria-disabled examples
 
 [Accessible Rich Internet Applications (ARIA)](https://www.w3.org/WAI/standards-guidelines/aria/) is a set of roles and attributes specified by the World Wide Web Consortium. ARIA defines ways to make web content and web applications more accessible to people with disabilities.
@@ -119,7 +126,7 @@ Stateful buttons are ideal for displaying the state of notifications. Use `varia
 
 ## Using router links
 
-Router links can be used for in-app linking in React environments to prevent page reloading. To use a `Link` component from a router package, you can pass a callback to the `component` property of the `Button`:
+Router links can be used for in-app linking in React environments to prevent page reloading. To use a `Link` component from a router package, you can follow our [custom component example](#custom-component) and pass a callback to the `component` property of the `Button`:
 
 ```nolive
 <Button variant="link" component={(props: any) => <Link {...props} to="#" />}>

packages/react-core/src/components/Button/examples/ButtonCustomComponent.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+
+export const ButtonCustomComponent: React.FunctionComponent = () => (
+  <Button variant="link" component={(props: any) => <a {...props} href="#" />}>
+    Router link
+  </Button>
+);

packages/react-core/src/components/Masthead/examples/Masthead.md

@@ -17,42 +17,44 @@ Mastheads contain the `<MastheadMain>` that wraps a `<PageToggleButton>` and `<M
 ### Basic
 
 ```ts file="./MastheadBasic.tsx"
-
 ```
 
 ### Basic with mixed content
 
 ```ts file="./MastheadBasicMixedContent.tsx"
-
 ```
 
 ### Display inline
 
 ```ts file="./MastheadDisplayInline.tsx"
-
 ```
 
 ### Display stack
 
 ```ts file="./MastheadDisplayStack.tsx"
-
 ```
 
 ### Display stack, display inline responsive
 
 ```ts file="./MastheadDisplayStackInlineResponsive.tsx"
-
 ```
 
 ### Inset
 
 ```ts file="./MastheadInsets.tsx"
+```
+
+### Custom logo component
+
+In addition to being able to pass a string to the `component` property of `MastheadLogo`, you can provide more fine-tuned customization by passing a callback that returns a component.
+
 
+```ts file="./MastheadLogoCustomComponent.tsx"
 ```
 
 ## Using router links
 
-Router links can be used for in-app linking in React environments to prevent page reloading. To use a `Link` component from a router package, you can pass a callback to the `component` property of the `MastheadLogo`:
+Router links can be used for in-app linking in React environments to prevent page reloading. To use a `Link` component from a router package, you can follow our [custom logo component example](#custom-logo-component) and pass a callback to the `component` property of the `MastheadLogo`:
 
 ```nolive
 <MastheadLogo component={(props) => <Link {...props} to="#" />}>

packages/react-core/src/components/Masthead/examples/MastheadLogoCustomComponent.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Button,
+  Brand
+} from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
+
+export const MastheadLogoCustomComponent: React.FunctionComponent = () => (
+  <Masthead id="icon-router-link">
+    <MastheadMain>
+      <MastheadToggle>
+        <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
+      </MastheadToggle>
+      <MastheadBrand>
+        <MastheadLogo component={(props) => <a {...props} href="#" />}>
+          <Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
+        </MastheadLogo>
+      </MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);