diff --git a/src/Hyperlink/README.md b/src/Hyperlink/README.md
index d3ef064f1e..0f41cbba95 100644
--- a/src/Hyperlink/README.md
+++ b/src/Hyperlink/README.md
@@ -7,7 +7,7 @@ categories:
 - Buttonlike
 status: 'Needs Work'
 designStatus: 'Done'
-devStatus: 'To Do'
+devStatus: 'Done'
 notes: |
   Improve prop naming. Deprecate content prop.
   Use React.forwardRef for ref forwarding.
@@ -100,3 +100,18 @@ notes: |
   </div>
 </div>
 ```
+
+## with custom link element
+
+``Hyperlink`` typically relies on the standard HTML anchor tag (i.e., ``a``); however, this behavior may be overriden when the destination link is to an internal route where it should be using routing instead (e.g., ``Link`` from React Router).
+
+```jsx live
+<Hyperlink
+  as={GatsbyLink}
+  // `destination` is still a required prop even though the `to` takes precedence.
+  destination="/components/button"
+  to="/components/button"
+>
+  Button
+</Hyperlink>
+```
\ No newline at end of file
diff --git a/src/Hyperlink/index.tsx b/src/Hyperlink/index.tsx
index 5229f73f8f..71d1a93c97 100644
--- a/src/Hyperlink/index.tsx
+++ b/src/Hyperlink/index.tsx
@@ -1,13 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import {
+  type BsPrefixRefForwardingComponent as ComponentWithAsProp,
+  type BsPrefixProps,
+} from 'react-bootstrap/esm/helpers';
 import { Launch } from '../../icons';
 import Icon from '../Icon';
 
 export const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';
 export const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';
 
-interface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {
+interface HyperlinkProps extends BsPrefixProps, Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {
   /** specifies the URL */
   destination: string;
   /** Content of the hyperlink */
@@ -27,7 +31,10 @@ interface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'
   target?: '_blank' | '_self';
 }
 
-const Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({
+type HyperlinkType = ComponentWithAsProp<'a', HyperlinkProps>;
+
+const Hyperlink: HyperlinkType = React.forwardRef<HTMLAnchorElement, HyperlinkProps>(({
+  as: Component = 'a',
   className,
   destination,
   children,
@@ -77,7 +84,7 @@ const Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({
   }
 
   return (
-    <a
+    <Component
       ref={ref}
       className={classNames(
         'pgn__hyperlink',
@@ -95,11 +102,12 @@ const Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({
     >
       {children}
       {externalLinkIcon}
-    </a>
+    </Component>
   );
 });
 
 Hyperlink.defaultProps = {
+  as: 'a',
   className: undefined,
   target: '_self',
   onClick: () => {},
@@ -111,6 +119,8 @@ Hyperlink.defaultProps = {
 };
 
 Hyperlink.propTypes = {
+  /** specifies the component element type to render for the hyperlink */
+  as: PropTypes.elementType,
   /** specifies the URL */
   destination: PropTypes.string.isRequired,
   /** Content of the hyperlink */