diff --git a/.changeset/curly-otters-repeat.md b/.changeset/curly-otters-repeat.md
new file mode 100644
index 00000000000..2504ec46af7
--- /dev/null
+++ b/.changeset/curly-otters-repeat.md
@@ -0,0 +1,6 @@
+---
+"@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 b414769cc89..3882a7cd795 100644
--- a/docs/content/Link.mdx
+++ b/docs/content/Link.mdx
@@ -10,10 +10,6 @@ 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 63660e4327b..4a0413f1b68 100644
--- a/generated/components.json
+++ b/generated/components.json
@@ -215,11 +215,6 @@
               "name": "ref",
               "type": "React.RefObject<HTMLAnchorElement>"
             },
-            {
-              "name": "as",
-              "type": "React.ElementType",
-              "defaultValue": "\"a\""
-            },
             {
               "name": "sx",
               "type": "SystemStyleObject"
@@ -900,7 +895,7 @@
         },
         {
           "name": "variant",
-          "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'",
+          "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'\n| 'link'",
           "defaultValue": "'default'",
           "description": "Change the visual style of the button."
         },
@@ -2062,7 +2057,7 @@
           "name": "href",
           "type": "string",
           "defaultValue": "",
-          "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)."
+          "description": "URL to be used for the Link. (The `href` is passed to the underlying `<a>` element)."
         },
         {
           "name": "muted",
@@ -2086,11 +2081,6 @@
           "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 392c6db523a..e3c4a6a42c3 100644
--- a/src/ActionList/ActionList.docs.json
+++ b/src/ActionList/ActionList.docs.json
@@ -114,11 +114,6 @@
           "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 d4decbe2292..c293e3591be 100644
--- a/src/ActionList/LinkItem.tsx
+++ b/src/ActionList/LinkItem.tsx
@@ -9,6 +9,7 @@ import {ActionListItemProps} from './shared'
 type LinkProps = {
   download?: string
   href?: string
+  to?: string
   hrefLang?: string
   media?: string
   ping?: string
@@ -21,7 +22,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, as: Component, ...props}, forwardedRef) => {
+export const LinkItem = React.forwardRef(({sx = {}, active, ...props}, forwardedRef) => {
   const styles = {
     // occupy full size of Item
     paddingX: 2,
@@ -35,6 +36,8 @@ export const LinkItem = React.forwardRef(({sx = {}, active, as: Component, ...pr
     '&:hover': {color: 'inherit', textDecoration: 'none'},
   }
 
+  if (props.href === undefined && props.to !== undefined) props.href = props.to
+
   return (
     <Item
       active={active}
@@ -45,14 +48,7 @@ export const LinkItem = React.forwardRef(({sx = {}, active, as: Component, ...pr
           props.onClick && props.onClick(event as React.MouseEvent<HTMLAnchorElement>)
         }
         return (
-          <Link
-            as={Component}
-            sx={merge(styles, sx as SxProp)}
-            {...rest}
-            {...props}
-            onClick={clickHandler}
-            ref={forwardedRef}
-          >
+          <Link 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 4fc26b7b1bc..d718d002316 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'",
+      "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'\n| 'link'",
       "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 daa7ec54ee3..2048159eb8c 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'],
+      options: ['default', 'primary', 'danger', 'invisible', 'outline', 'link'],
     },
     alignContent: {
       control: {
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index 67276efe797..ab5c29dc8f8 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -186,6 +186,25 @@ 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 6ad81d0e9a0..b9477c4bcf8 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'
+export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outline' | 'link'
 
 export type Size = 'small' | 'medium' | 'large'
 
diff --git a/src/Link/Link.docs.json b/src/Link/Link.docs.json
index 3563203ff67..86f2fec216d 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. If `as` is specified, the link behavior may need different props)."
+      "description": "URL to be used for the Link. (The `href` is passed to the underlying `<a>` element)."
     },
     {
       "name": "muted",
@@ -33,15 +33,10 @@
       "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 22fe440c73b..3d1b3d5d99d 100644
--- a/src/Link/Link.features.stories.tsx
+++ b/src/Link/Link.features.stories.tsx
@@ -1,5 +1,6 @@
 import Link from '../Link'
-import {Meta} from '@storybook/react'
+import Box from '../Box'
+import {Meta, StoryFn} from '@storybook/react'
 import React from 'react'
 import {ComponentProps} from '../utils/types'
 
@@ -19,3 +20,20 @@ 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 735c1674466..006cc93a3f4 100644
--- a/src/Link/Link.tsx
+++ b/src/Link/Link.tsx
@@ -1,4 +1,4 @@
-import React, {forwardRef, useEffect} from 'react'
+import React, {forwardRef} from 'react'
 import styled from 'styled-components'
 import {system} from 'styled-system'
 import {get} from '../constants'
@@ -23,55 +23,27 @@ 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 {
+  &:hover,
+  &:focus {
     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: Component = 'a', ...props}, forwardedRef) => {
+const Link = forwardRef(({as, ...props}, forwardedRef) => {
   const innerRef = React.useRef<HTMLAnchorElement>(null)
   useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
-  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])
+  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.',
+    )
   }
 
   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 1506aca38f1..610c87cebf0 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})
+  behavesAsComponent({Component: Link, options: {skipAs: true}})
 
   checkExports('Link', {
     default: Link,
@@ -29,10 +29,6 @@ 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()
   })
@@ -40,13 +36,4 @@ 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 eaad8694936..5bc12f42d7d 100644
--- a/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
+++ b/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
@@ -1,39 +1,5 @@
 // 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;
@@ -41,28 +7,12 @@ exports[`Link passes href down to link element 1`] = `
   text-decoration: none;
 }
 
-.c0:hover {
+.c0:hover,
+.c0:focus {
   -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"
@@ -76,28 +26,12 @@ exports[`Link renders consistently 1`] = `
   text-decoration: none;
 }
 
-.c0:hover {
+.c0:hover,
+.c0:focus {
   -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"
 />
@@ -110,29 +44,13 @@ exports[`Link respects hoverColor prop 1`] = `
   text-decoration: none;
 }
 
-.c0:hover {
+.c0:hover,
+.c0:focus {
   -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"
 />
@@ -146,29 +64,13 @@ exports[`Link respects the  "sx" prop when "muted" prop is also passed 1`] = `
   color: #ffffff;
 }
 
-.c0:hover {
+.c0:hover,
+.c0:focus {
   -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}
@@ -182,29 +84,13 @@ exports[`Link respects the "muted" prop 1`] = `
   text-decoration: none;
 }
 
-.c0:hover {
+.c0:hover,
+.c0:focus {
   -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 ee4fa595285..828ffb62b6f 100644
--- a/src/NavList/NavList.test.tsx
+++ b/src/NavList/NavList.test.tsx
@@ -3,13 +3,6 @@ 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>(
@@ -81,10 +74,10 @@ describe('NavList.Item', () => {
     expect(aboutLink).not.toHaveAttribute('aria-current')
   })
 
-  it('is compatiable with React-Router-like link components', () => {
+  it('is compatible with React-Router-like link components', () => {
     const {getByRole} = render(
       <NavList>
-        <NavList.Item as={ReactRouterLikeLink} to={'/'} aria-current="page">
+        <NavList.Item href={'/'} aria-current="page">
           React Router link
         </NavList.Item>
       </NavList>,
@@ -301,12 +294,12 @@ describe('NavList.Item with NavList.SubNav', () => {
     expect(consoleSpy).toHaveBeenCalled()
   })
 
-  it('is compatiable with React-Router-like link components', () => {
+  it('is compatible 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 as={ReactRouterLikeLink} to={href} aria-current={isCurrent ? 'page' : false}>
+        <NavList.Item href={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 bb5474bed47..aec88626fb0 100644
--- a/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -206,28 +206,12 @@ exports[`NavList renders a simple list 1`] = `
   color: inherit;
 }
 
-.c3:hover {
+.c3:hover,
+.c3:focus {
   -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;
@@ -603,28 +587,12 @@ exports[`NavList renders with groups 1`] = `
   color: inherit;
 }
 
-.c7:hover {
+.c7:hover,
+.c7:focus {
   -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;
@@ -1081,28 +1049,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: 400;
 }
 
-.c11:hover {
+.c11:hover,
+.c11:focus {
   -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;
@@ -1554,28 +1506,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   font-weight: 400;
 }
 
-.c11:hover {
+.c11:hover,
+.c11:focus {
   -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 8fd6258c72d..1c2fe167f4b 100644
--- a/src/PageHeader/PageHeader.tsx
+++ b/src/PageHeader/PageHeader.tsx
@@ -102,12 +102,16 @@ 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 = 'a', hidden = hiddenOnRegularAndWide}, ref) => {
+  ({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.')
+    }
+
     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 d54bec24567..44c63c89af3 100644
--- a/src/__tests__/__snapshots__/SideNav.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SideNav.test.tsx.snap
@@ -7,28 +7,12 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
   text-decoration: none;
 }
 
-.c0:hover {
+.c0:hover,
+.c0:focus {
   -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;