diff --git a/.changeset/curly-otters-repeat.md b/.changeset/curly-otters-repeat.md
deleted file mode 100644
index 2504ec46af7..00000000000
--- a/.changeset/curly-otters-repeat.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@primer/react": minor
----
-
-Link components no longer accept an `as` prop. If you need link-like styling, you should use a different component and style accordingly.
-Button has a `link` variant which can be used for this purpose.
diff --git a/docs/content/Link.mdx b/docs/content/Link.mdx
index 3882a7cd795..b414769cc89 100644
--- a/docs/content/Link.mdx
+++ b/docs/content/Link.mdx
@@ -10,6 +10,10 @@ import data from '../../src/Link/Link.docs.json'
 
 The Link component styles anchor tags with default hyperlink color cues and hover text decoration. `Link` is used for destinations, or moving from one page to another.
 
+In special cases where you'd like a `<button>` styled like a `Link`, use `<Link as='button'>`. Make sure to provide a click handler with `onClick`.
+
+**Important:** When using the `as` prop, be sure to always render an accessible element type, like `a`, `button`, `input`, or `summary`.
+
 ## Examples
 
 ```jsx live
diff --git a/generated/components.json b/generated/components.json
index 8695ff7ecbe..852b84a4672 100644
--- a/generated/components.json
+++ b/generated/components.json
@@ -215,6 +215,11 @@
               "name": "ref",
               "type": "React.RefObject<HTMLAnchorElement>"
             },
+            {
+              "name": "as",
+              "type": "React.ElementType",
+              "defaultValue": "\"a\""
+            },
             {
               "name": "sx",
               "type": "SystemStyleObject"
@@ -895,7 +900,7 @@
         },
         {
           "name": "variant",
-          "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'\n| 'link'",
+          "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'",
           "defaultValue": "'default'",
           "description": "Change the visual style of the button."
         },
@@ -2057,7 +2062,7 @@
           "name": "href",
           "type": "string",
           "defaultValue": "",
-          "description": "URL to be used for the Link. (The `href` is passed to the underlying `<a>` element)."
+          "description": "URL to be used for the Link. (The `href` is passed to the underlying `<a>` element. If `as` is specified, the link behavior may need different props)."
         },
         {
           "name": "muted",
@@ -2081,6 +2086,11 @@
           "name": "ref",
           "type": "React.RefObject<HTMLAnchorElement>"
         },
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "defaultValue": "\"a\""
+        },
         {
           "name": "sx",
           "type": "SystemStyleObject"
diff --git a/src/ActionList/ActionList.docs.json b/src/ActionList/ActionList.docs.json
index e3c4a6a42c3..392c6db523a 100644
--- a/src/ActionList/ActionList.docs.json
+++ b/src/ActionList/ActionList.docs.json
@@ -114,6 +114,11 @@
           "name": "ref",
           "type": "React.RefObject<HTMLAnchorElement>"
         },
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "defaultValue": "\"a\""
+        },
         {
           "name": "sx",
           "type": "SystemStyleObject"
diff --git a/src/ActionList/LinkItem.tsx b/src/ActionList/LinkItem.tsx
index c293e3591be..d4decbe2292 100644
--- a/src/ActionList/LinkItem.tsx
+++ b/src/ActionList/LinkItem.tsx
@@ -9,7 +9,6 @@ import {ActionListItemProps} from './shared'
 type LinkProps = {
   download?: string
   href?: string
-  to?: string
   hrefLang?: string
   media?: string
   ping?: string
@@ -22,7 +21,7 @@ type LinkProps = {
 // LinkItem does not support selected, variants, etc.
 export type ActionListLinkItemProps = Pick<ActionListItemProps, 'active' | 'children' | 'sx'> & LinkProps
 
-export const LinkItem = React.forwardRef(({sx = {}, active, ...props}, forwardedRef) => {
+export const LinkItem = React.forwardRef(({sx = {}, active, as: Component, ...props}, forwardedRef) => {
   const styles = {
     // occupy full size of Item
     paddingX: 2,
@@ -36,8 +35,6 @@ export const LinkItem = React.forwardRef(({sx = {}, active, ...props}, forwarded
     '&:hover': {color: 'inherit', textDecoration: 'none'},
   }
 
-  if (props.href === undefined && props.to !== undefined) props.href = props.to
-
   return (
     <Item
       active={active}
@@ -48,7 +45,14 @@ export const LinkItem = React.forwardRef(({sx = {}, active, ...props}, forwarded
           props.onClick && props.onClick(event as React.MouseEvent<HTMLAnchorElement>)
         }
         return (
-          <Link sx={merge(styles, sx as SxProp)} {...rest} {...props} onClick={clickHandler} ref={forwardedRef}>
+          <Link
+            as={Component}
+            sx={merge(styles, sx as SxProp)}
+            {...rest}
+            {...props}
+            onClick={clickHandler}
+            ref={forwardedRef}
+          >
             {children}
           </Link>
         )
diff --git a/src/Button/Button.docs.json b/src/Button/Button.docs.json
index d718d002316..4fc26b7b1bc 100644
--- a/src/Button/Button.docs.json
+++ b/src/Button/Button.docs.json
@@ -13,7 +13,7 @@
     },
     {
       "name": "variant",
-      "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'\n| 'link'",
+      "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'",
       "defaultValue": "'default'",
       "description": "Change the visual style of the button."
     },
@@ -67,4 +67,4 @@
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
index 2048159eb8c..daa7ec54ee3 100644
--- a/src/Button/Button.stories.tsx
+++ b/src/Button/Button.stories.tsx
@@ -22,7 +22,7 @@ export default {
       control: {
         type: 'radio',
       },
-      options: ['default', 'primary', 'danger', 'invisible', 'outline', 'link'],
+      options: ['default', 'primary', 'danger', 'invisible', 'outline'],
     },
     alignContent: {
       control: {
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index ab5c29dc8f8..67276efe797 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -186,25 +186,6 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         borderColor: 'btn.outline.selectedBorder',
       },
     },
-    link: {
-      color: 'accent.fg',
-      backgroundColor: 'transparent',
-      display: 'inline-flex',
-      border: 'none',
-      height: 'unset',
-      padding: 0,
-      '&:hover:not(:disabled)': {
-        textDecoration: 'underline',
-      },
-      '&:focus-visible, &:focus': {
-        outlineOffset: '2px',
-      },
-      '&:disabled, &[aria-disabled=true]': {
-        color: 'primer.fg.disabled',
-        backgroundColor: 'transparent',
-        borderColor: 'transparent',
-      },
-    },
   }
   return style[variant]
 }
diff --git a/src/Button/types.ts b/src/Button/types.ts
index 6256d6835b3..bccc1c0761c 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -8,7 +8,7 @@ export const StyledButton = styled.button<SxProp>`
   ${sx};
 `
 
-export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outline' | 'link'
+export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outline'
 
 export type Size = 'small' | 'medium' | 'large'
 
diff --git a/src/Link/Link.docs.json b/src/Link/Link.docs.json
index 86f2fec216d..3563203ff67 100644
--- a/src/Link/Link.docs.json
+++ b/src/Link/Link.docs.json
@@ -9,7 +9,7 @@
       "name": "href",
       "type": "string",
       "defaultValue": "",
-      "description": "URL to be used for the Link. (The `href` is passed to the underlying `<a>` element)."
+      "description": "URL to be used for the Link. (The `href` is passed to the underlying `<a>` element. If `as` is specified, the link behavior may need different props)."
     },
     {
       "name": "muted",
@@ -33,10 +33,15 @@
       "name": "ref",
       "type": "React.RefObject<HTMLAnchorElement>"
     },
+    {
+      "name": "as",
+      "type": "React.ElementType",
+      "defaultValue": "\"a\""
+    },
     {
       "name": "sx",
       "type": "SystemStyleObject"
     }
   ],
   "subcomponents": []
-}
+}
\ No newline at end of file
diff --git a/src/Link/Link.features.stories.tsx b/src/Link/Link.features.stories.tsx
index 3d1b3d5d99d..22fe440c73b 100644
--- a/src/Link/Link.features.stories.tsx
+++ b/src/Link/Link.features.stories.tsx
@@ -1,6 +1,5 @@
 import Link from '../Link'
-import Box from '../Box'
-import {Meta, StoryFn} from '@storybook/react'
+import {Meta} from '@storybook/react'
 import React from 'react'
 import {ComponentProps} from '../utils/types'
 
@@ -20,20 +19,3 @@ export const Underline = () => (
     Link
   </Link>
 )
-
-export const WithinText: StoryFn<typeof Link> = args => (
-  <Box as="p">
-    This{' '}
-    <Link href="#" {...args}>
-      link
-    </Link>{' '}
-    is inside of other text.
-  </Box>
-)
-
-WithinText.args = {
-  muted: false,
-  underline: false,
-}
-
-WithinText.argTypes = {}
diff --git a/src/Link/Link.tsx b/src/Link/Link.tsx
index 006cc93a3f4..735c1674466 100644
--- a/src/Link/Link.tsx
+++ b/src/Link/Link.tsx
@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import React, {forwardRef, useEffect} from 'react'
 import styled from 'styled-components'
 import {system} from 'styled-system'
 import {get} from '../constants'
@@ -23,27 +23,55 @@ const hoverColor = system({
 const StyledLink = styled.a<StyledLinkProps>`
   color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))};
   text-decoration: ${props => (props.underline ? 'underline' : 'none')};
-  &:hover,
-  &:focus {
+  &:hover {
     text-decoration: ${props => (props.muted ? 'none' : 'underline')};
     ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '')};
   }
+  &:is(button) {
+    display: inline-block;
+    padding: 0;
+    font-size: inherit;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    background-color: transparent;
+    border: 0;
+    appearance: none;
+  }
   ${sx};
 `
 
-const Link = forwardRef(({as, ...props}, forwardedRef) => {
+const Link = forwardRef(({as: Component = 'a', ...props}, forwardedRef) => {
   const innerRef = React.useRef<HTMLAnchorElement>(null)
   useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
-  if (as !== undefined) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'Links no longer accept an as prop. If you need to style another tag as a link, you should use a different component and apply appropriate styling.',
-    )
+  if (__DEV__) {
+    /**
+     * The Linter yells because it thinks this conditionally calls an effect,
+     * but since this is a compile-time flag and not a runtime conditional
+     * this is safe, and ensures the entire effect is kept out of prod builds
+     * shaving precious bytes from the output, and avoiding mounting a noop effect
+     */
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      if (
+        innerRef.current &&
+        !(innerRef.current instanceof HTMLButtonElement) &&
+        !(innerRef.current instanceof HTMLAnchorElement)
+      ) {
+        // eslint-disable-next-line no-console
+        console.error(
+          'Error: Found `Link` component that renders an inaccessible element',
+          innerRef.current,
+          'Please ensure `Link` always renders as <a> or <button>',
+        )
+      }
+    }, [innerRef])
   }
 
   return (
     <StyledLink
+      as={Component}
       {...props}
       // @ts-ignore shh
       ref={innerRef}
diff --git a/src/Link/__tests__/Link.test.tsx b/src/Link/__tests__/Link.test.tsx
index 610c87cebf0..1506aca38f1 100644
--- a/src/Link/__tests__/Link.test.tsx
+++ b/src/Link/__tests__/Link.test.tsx
@@ -5,7 +5,7 @@ import {render as HTMLRender} from '@testing-library/react'
 import {axe} from 'jest-axe'
 
 describe('Link', () => {
-  behavesAsComponent({Component: Link, options: {skipAs: true}})
+  behavesAsComponent({Component: Link})
 
   checkExports('Link', {
     default: Link,
@@ -29,6 +29,10 @@ describe('Link', () => {
     expect(render(<Link sx={{fontStyle: 'italic'}} />)).toHaveStyleRule('font-style', 'italic')
   })
 
+  it('applies button styles when rendering a button element', () => {
+    expect(render(<Link as="button" />)).toMatchSnapshot()
+  })
+
   it('respects the "muted" prop', () => {
     expect(render(<Link muted />)).toMatchSnapshot()
   })
@@ -36,4 +40,13 @@ describe('Link', () => {
   it('respects the  "sx" prop when "muted" prop is also passed', () => {
     expect(render(<Link muted sx={{color: 'fg.onEmphasis'}} />)).toMatchSnapshot()
   })
+
+  it('logs a warning when trying to render invalid "as" prop', () => {
+    const consoleSpy = jest.spyOn(global.console, 'error').mockImplementation()
+
+    HTMLRender(<Link as="i" />)
+    expect(consoleSpy).toHaveBeenCalled()
+
+    consoleSpy.mockRestore()
+  })
 })
diff --git a/src/Link/__tests__/__snapshots__/Link.test.tsx.snap b/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
index 5bc12f42d7d..eaad8694936 100644
--- a/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
+++ b/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
@@ -1,5 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Link applies button styles when rendering a button element 1`] = `
+.c0 {
+  color: #0969da;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+<button
+  className="c0"
+/>
+`;
+
 exports[`Link passes href down to link element 1`] = `
 .c0 {
   color: #0969da;
@@ -7,12 +41,28 @@ exports[`Link passes href down to link element 1`] = `
   text-decoration: none;
 }
 
-.c0:hover,
-.c0:focus {
+.c0:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 <a
   className="c0"
   href="https://github.com"
@@ -26,12 +76,28 @@ exports[`Link renders consistently 1`] = `
   text-decoration: none;
 }
 
-.c0:hover,
-.c0:focus {
+.c0:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 <a
   className="c0"
 />
@@ -44,13 +110,29 @@ exports[`Link respects hoverColor prop 1`] = `
   text-decoration: none;
 }
 
-.c0:hover,
-.c0:focus {
+.c0:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   color: #0969da;
 }
 
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 <a
   className="c0"
 />
@@ -64,13 +146,29 @@ exports[`Link respects the  "sx" prop when "muted" prop is also passed 1`] = `
   color: #ffffff;
 }
 
-.c0:hover,
-.c0:focus {
+.c0:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #0969da;
 }
 
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 <a
   className="c0"
   muted={true}
@@ -84,13 +182,29 @@ exports[`Link respects the "muted" prop 1`] = `
   text-decoration: none;
 }
 
-.c0:hover,
-.c0:focus {
+.c0:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #0969da;
 }
 
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 <a
   className="c0"
   muted={true}
diff --git a/src/NavList/NavList.test.tsx b/src/NavList/NavList.test.tsx
index 828ffb62b6f..ee4fa595285 100644
--- a/src/NavList/NavList.test.tsx
+++ b/src/NavList/NavList.test.tsx
@@ -3,6 +3,13 @@ import React from 'react'
 import {ThemeProvider, SSRProvider} from '..'
 import {NavList} from './NavList'
 
+type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode}
+
+const ReactRouterLikeLink = React.forwardRef<HTMLAnchorElement, ReactRouterLikeLinkProps>(({to, ...props}, ref) => {
+  // eslint-disable-next-line jsx-a11y/anchor-has-content
+  return <a ref={ref} href={to} {...props} />
+})
+
 type NextJSLinkProps = {href: string; children: React.ReactNode}
 
 const NextJSLikeLink = React.forwardRef<HTMLAnchorElement, NextJSLinkProps>(
@@ -74,10 +81,10 @@ describe('NavList.Item', () => {
     expect(aboutLink).not.toHaveAttribute('aria-current')
   })
 
-  it('is compatible with React-Router-like link components', () => {
+  it('is compatiable with React-Router-like link components', () => {
     const {getByRole} = render(
       <NavList>
-        <NavList.Item href={'/'} aria-current="page">
+        <NavList.Item as={ReactRouterLikeLink} to={'/'} aria-current="page">
           React Router link
         </NavList.Item>
       </NavList>,
@@ -294,12 +301,12 @@ describe('NavList.Item with NavList.SubNav', () => {
     expect(consoleSpy).toHaveBeenCalled()
   })
 
-  it('is compatible with React-Router-like link components', () => {
+  it('is compatiable with React-Router-like link components', () => {
     function NavLink({href, children}: {href: string; children: React.ReactNode}) {
       // In a real app, you'd check if the href matches the url of the current page. For testing purposes, we'll use the text of the link to determine if it's current
       const isCurrent = children === 'Current'
       return (
-        <NavList.Item href={href} aria-current={isCurrent ? 'page' : false}>
+        <NavList.Item as={ReactRouterLikeLink} to={href} aria-current={isCurrent ? 'page' : false}>
           {children}
         </NavList.Item>
       )
diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
index aec88626fb0..bb5474bed47 100644
--- a/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -206,12 +206,28 @@ exports[`NavList renders a simple list 1`] = `
   color: inherit;
 }
 
-.c3:hover,
-.c3:focus {
+.c3:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
+.c3:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 .c3:hover {
   color: inherit;
   -webkit-text-decoration: none;
@@ -587,12 +603,28 @@ exports[`NavList renders with groups 1`] = `
   color: inherit;
 }
 
-.c7:hover,
-.c7:focus {
+.c7:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
+.c7:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 .c7:hover {
   color: inherit;
   -webkit-text-decoration: none;
@@ -1049,12 +1081,28 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: 400;
 }
 
-.c11:hover,
-.c11:focus {
+.c11:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
+.c11:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 .c11:hover {
   color: inherit;
   -webkit-text-decoration: none;
@@ -1506,12 +1554,28 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   font-weight: 400;
 }
 
-.c11:hover,
-.c11:focus {
+.c11:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
+.c11:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 .c11:hover {
   color: inherit;
   -webkit-text-decoration: none;
diff --git a/src/PageHeader/PageHeader.tsx b/src/PageHeader/PageHeader.tsx
index 1c2fe167f4b..8fd6258c72d 100644
--- a/src/PageHeader/PageHeader.tsx
+++ b/src/PageHeader/PageHeader.tsx
@@ -102,16 +102,12 @@ export type ParentLinkProps = React.PropsWithChildren<ChildrenPropTypes & LinkPr
 
 // PageHeader.ParentLink : Only visible on narrow viewports by default to let users navigate up in the hierarchy.
 const ParentLink = React.forwardRef<HTMLAnchorElement, ParentLinkProps>(
-  ({children, sx = {}, href, 'aria-label': ariaLabel, as, hidden = hiddenOnRegularAndWide}, ref) => {
-    if (as !== undefined) {
-      // eslint-disable-next-line no-console
-      console.warn('ParentLink no longer accepts an as prop.')
-    }
-
+  ({children, sx = {}, href, 'aria-label': ariaLabel, as = 'a', hidden = hiddenOnRegularAndWide}, ref) => {
     return (
       <>
         <Link
           ref={ref}
+          as={as}
           aria-label={ariaLabel}
           muted
           sx={merge<BetterSystemStyleObject>(
diff --git a/src/__tests__/__snapshots__/SideNav.test.tsx.snap b/src/__tests__/__snapshots__/SideNav.test.tsx.snap
index 44c63c89af3..d54bec24567 100644
--- a/src/__tests__/__snapshots__/SideNav.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SideNav.test.tsx.snap
@@ -7,12 +7,28 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
   text-decoration: none;
 }
 
-.c0:hover,
-.c0:focus {
+.c0:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
+.c0:is(button) {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 .c1 {
   position: relative;
   display: block;