docs: add usage notes for ExternalLinkButton

Author: logonoff

packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButton.md

@@ -0,0 +1,38 @@
+---
+section: Component groups
+subsection: Controls
+id: External link button
+source: react
+propComponents: ['ExternalLinkButton']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButton.md
+---
+
+import ExternalLinkButton from "@patternfly/react-component-groups/dist/dynamic/ExternalLinkButton"
+
+The **external link button** component is a button that opens links in an external tab. To further customize this component, you can also utilize all properties of the [button component](/components/button).
+
+## Examples
+
+### Basic external link button
+
+In order to display a basic external link button, you can use the `href` property to specify the URL and the `variant` property to set the button style.
+
+```js file="./ExternalLinkButtonExample.tsx"
+
+```
+
+### Inline external link button
+
+You may use the external link button component inline with other text by using the `inline` property.
+
+```js file="./ExternalLinkButtonInlineExample.tsx"
+
+```
+
+### Passing props to the icon
+
+You may pass props to the icon using the `iconProps` property. This is useful for customizing the title of the icon for enhanced screen reader support.
+
+```js file="./ExternalLinkButtonIconPropsExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButtonExample.tsx

@@ -0,0 +1,10 @@
+import ExternalLinkButton from '@patternfly/react-component-groups/dist/dynamic/ExternalLinkButton';
+
+export const BasicExample = () => (
+  <ExternalLinkButton
+    href="https://www.patternfly.org"
+    variant="primary"
+  >
+    Learn more about PatternFly
+  </ExternalLinkButton>
+);

packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButtonIconPropsExample.tsx

@@ -0,0 +1,11 @@
+import ExternalLinkButton from '@patternfly/react-component-groups/dist/dynamic/ExternalLinkButton';
+
+export const BasicExample = () => (
+  <ExternalLinkButton
+    href="https://www.patternfly.org"
+    iconProps={{ title: '(Opens in new tab)' }}
+    variant="link"
+  >
+    Learn more about PatternFly
+  </ExternalLinkButton>
+);

packages/module/patternfly-docs/content/extensions/component-groups/examples/ExternalLinkButton/ExternalLinkButtonInlineExample.tsx

@@ -0,0 +1,16 @@
+import ExternalLinkButton from '@patternfly/react-component-groups/dist/dynamic/ExternalLinkButton';
+import { Content, ContentVariants } from '@patternfly/react-core';
+
+export const BasicExample = () => (
+  <Content component={ContentVariants.p}>
+    Today, I had a burger for lunch. It reminded me of the
+    <ExternalLinkButton
+      href="https://www.patternfly.org"
+      isInline
+      variant="link"
+    >
+      PatternFly
+    </ExternalLinkButton>
+    design system.
+  </Content>
+);