diff --git a/docs/docs-components/data/components.js b/docs/docs-components/data/components.js
index 70f8591c4c..ad509b5693 100644
--- a/docs/docs-components/data/components.js
+++ b/docs/docs-components/data/components.js
@@ -20,6 +20,7 @@ import AvatarGroup from '../../graphics/general/AvatarGroup.svg';
 import Badge from '../../graphics/general/Badge.svg';
 import Button from '../../graphics/general/Button.svg';
 import ButtonGroup from '../../graphics/general/ButtonGroup.svg';
+import ButtonLink from '../../graphics/general/ButtonLink.svg';
 import Callout from '../../graphics/general/Callout.svg';
 import Checkbox from '../../graphics/general/Checkbox.svg';
 import Collage from '../../graphics/general/Collage.svg';
@@ -383,6 +384,32 @@ const componentData: $ReadOnlyArray<ComponentData> = [
       },
     },
   },
+  {
+    id: 'ButtonLink',
+    platform: {
+      web: {
+        name: 'ButtonLink',
+        visual: {
+          svg: <ButtonLink />,
+        },
+        description: 'ButtonLink allow users to use a surface action to link to another page.',
+        category: ['Actions'],
+        status: {
+          accessible: {
+            summary: 'ready',
+            a11yVisual: 'ready',
+            a11yScreenreader: 'ready',
+            a11yNavigation: 'ready',
+            a11yComprehension: 'ready',
+          },
+          documentation: 'ready',
+          figmaStatus: 'notAvailable',
+          responsive: 'ready',
+          status: 'ready',
+        },
+      },
+    },
+  },
   {
     id: 'ButtonGroup',
     platform: {
diff --git a/docs/docs-components/siteIndex.js b/docs/docs-components/siteIndex.js
index b452799c79..8b3f8dd021 100644
--- a/docs/docs-components/siteIndex.js
+++ b/docs/docs-components/siteIndex.js
@@ -110,6 +110,7 @@ const siteIndex: $ReadOnlyArray<siteIndexType> = [
       'Badge',
       'Box',
       'Button',
+      'ButtonLink',
       'ButtonGroup',
       'Callout',
       'Checkbox',
diff --git a/docs/examples/button/roleLinkExample.js b/docs/examples/buttonlink/main.js
similarity index 81%
rename from docs/examples/button/roleLinkExample.js
rename to docs/examples/buttonlink/main.js
index bcf0dd4a2b..9e306437bd 100644
--- a/docs/examples/button/roleLinkExample.js
+++ b/docs/examples/buttonlink/main.js
@@ -1,16 +1,16 @@
 // @flow strict
 import { type Node } from 'react';
-import { Button, Flex } from 'gestalt';
+import { ButtonLink, Flex } from 'gestalt';
 
 export default function Example(): Node {
   return (
     <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
-      <Button
+      <ButtonLink
         accessibilityLabel="Visit Pinterest"
         iconEnd="visit"
         size="lg"
+        color="red"
         text="Visit Pinterest"
-        role="link"
         href="https://pinterest.com"
       />
     </Flex>
diff --git a/docs/examples/button/relAndTargetExample.js b/docs/examples/buttonlink/relAndTargetExample.js
similarity index 84%
rename from docs/examples/button/relAndTargetExample.js
rename to docs/examples/buttonlink/relAndTargetExample.js
index a093f66532..f2f846cf9a 100644
--- a/docs/examples/button/relAndTargetExample.js
+++ b/docs/examples/buttonlink/relAndTargetExample.js
@@ -1,16 +1,15 @@
 // @flow strict
 import { type Node } from 'react';
-import { Button, Flex } from 'gestalt';
+import { ButtonLink, Flex } from 'gestalt';
 
 export default function Example(): Node {
   return (
     <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
-      <Button
+      <ButtonLink
         accessibilityLabel="Visit Pinterest"
         iconEnd="visit"
         size="lg"
         text="Visit Pinterest"
-        role="link"
         rel="nofollow"
         target="blank"
         href="#"
diff --git a/docs/graphics/general/ButtonLink.svg b/docs/graphics/general/ButtonLink.svg
new file mode 100644
index 0000000000..7624a6a7e2
--- /dev/null
+++ b/docs/graphics/general/ButtonLink.svg
@@ -0,0 +1,23 @@
+<svg width="312" height="180" viewBox="0 0 312 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1542_1840)">
+<rect width="312" height="180" fill="#F6FDF5"/>
+<rect x="85" y="66" width="139.875" height="48" rx="24" fill="#005C62"/>
+<path d="M103.008 96.043V94.4805H106.359C107.104 94.4805 107.669 94.3294 108.055 94.0273C108.44 93.7201 108.633 93.2799 108.633 92.707V92.6914C108.633 92.3112 108.544 91.9909 108.367 91.7305C108.19 91.4701 107.924 91.2747 107.57 91.1445C107.221 91.0143 106.789 90.9492 106.273 90.9492H103.008V89.5195H105.961C106.674 89.5195 107.216 89.3841 107.586 89.1133C107.961 88.8424 108.148 88.4518 108.148 87.9414V87.9258C108.148 87.4258 107.979 87.0352 107.641 86.7539C107.302 86.4727 106.828 86.332 106.219 86.332H103.008V84.7695H106.703C107.422 84.7695 108.036 84.8841 108.547 85.1133C109.057 85.3372 109.451 85.6602 109.727 86.082C110.003 86.4987 110.141 86.9961 110.141 87.5742V87.5898C110.141 87.9857 110.049 88.3555 109.867 88.6992C109.69 89.043 109.451 89.3294 109.148 89.5586C108.852 89.7878 108.513 89.9336 108.133 89.9961V90.1367C108.638 90.1836 109.081 90.3294 109.461 90.5742C109.846 90.8138 110.146 91.1289 110.359 91.5195C110.578 91.9102 110.688 92.3477 110.688 92.832V92.8477C110.688 93.5039 110.531 94.0716 110.219 94.5508C109.911 95.0299 109.469 95.3997 108.891 95.6602C108.312 95.9154 107.622 96.043 106.82 96.043H103.008ZM102 96.043V84.7695H104.016V96.043H102Z" fill="white"/>
+<path d="M115.516 96.2148C114.88 96.2148 114.346 96.0924 113.914 95.8477C113.482 95.5977 113.156 95.2357 112.938 94.7617C112.719 94.2826 112.609 93.7044 112.609 93.0273V87.5039H114.555V92.582C114.555 93.2435 114.685 93.7409 114.945 94.0742C115.206 94.4076 115.63 94.5742 116.219 94.5742C116.531 94.5742 116.807 94.5273 117.047 94.4336C117.292 94.3346 117.495 94.194 117.656 94.0117C117.818 93.8294 117.94 93.6107 118.023 93.3555C118.107 93.0951 118.148 92.8034 118.148 92.4805V87.5039H120.094V96.043H118.148V94.7461H118.016C117.885 95.0482 117.703 95.3112 117.469 95.5352C117.234 95.7539 116.953 95.9232 116.625 96.043C116.297 96.1576 115.927 96.2148 115.516 96.2148Z" fill="white"/>
+<path d="M125.828 96.082C124.849 96.082 124.143 95.9023 123.711 95.543C123.279 95.1836 123.062 94.5951 123.062 93.7773V89.0117H121.734V87.5039H123.062V85.4102H125.039V87.5039H126.836V89.0117H125.039V93.3164C125.039 93.7383 125.128 94.0482 125.305 94.2461C125.487 94.4388 125.779 94.5352 126.18 94.5352C126.32 94.5352 126.435 94.5326 126.523 94.5273C126.617 94.5169 126.721 94.5065 126.836 94.4961V95.9961C126.701 96.0221 126.544 96.043 126.367 96.0586C126.195 96.0742 126.016 96.082 125.828 96.082Z" fill="white"/>
+<path d="M132.188 96.082C131.208 96.082 130.503 95.9023 130.07 95.543C129.638 95.1836 129.422 94.5951 129.422 93.7773V89.0117H128.094V87.5039H129.422V85.4102H131.398V87.5039H133.195V89.0117H131.398V93.3164C131.398 93.7383 131.487 94.0482 131.664 94.2461C131.846 94.4388 132.138 94.5352 132.539 94.5352C132.68 94.5352 132.794 94.5326 132.883 94.5273C132.977 94.5169 133.081 94.5065 133.195 94.4961V95.9961C133.06 96.0221 132.904 96.043 132.727 96.0586C132.555 96.0742 132.375 96.082 132.188 96.082Z" fill="white"/>
+<path d="M138.75 96.2148C137.901 96.2148 137.169 96.0378 136.555 95.6836C135.94 95.3242 135.466 94.8138 135.133 94.1523C134.805 93.4909 134.641 92.6992 134.641 91.7773V91.7617C134.641 90.8503 134.807 90.0638 135.141 89.4023C135.474 88.7357 135.945 88.2253 136.555 87.8711C137.169 87.5169 137.901 87.3398 138.75 87.3398C139.599 87.3398 140.328 87.5169 140.938 87.8711C141.552 88.2253 142.026 88.7331 142.359 89.3945C142.693 90.056 142.859 90.8451 142.859 91.7617V91.7773C142.859 92.6992 142.693 93.4909 142.359 94.1523C142.031 94.8138 141.56 95.3242 140.945 95.6836C140.336 96.0378 139.604 96.2148 138.75 96.2148ZM138.75 94.6367C139.198 94.6367 139.578 94.5247 139.891 94.3008C140.208 94.0716 140.451 93.7461 140.617 93.3242C140.784 92.8971 140.867 92.3841 140.867 91.7852V91.7695C140.867 91.1654 140.784 90.6523 140.617 90.2305C140.451 89.8034 140.208 89.4779 139.891 89.2539C139.578 89.0247 139.198 88.9102 138.75 88.9102C138.302 88.9102 137.919 89.0247 137.602 89.2539C137.284 89.4779 137.042 89.8034 136.875 90.2305C136.708 90.6523 136.625 91.1654 136.625 91.7695V91.7852C136.625 92.3841 136.708 92.8971 136.875 93.3242C137.042 93.7513 137.281 94.0768 137.594 94.3008C137.911 94.5247 138.297 94.6367 138.75 94.6367Z" fill="white"/>
+<path d="M144.812 96.043V87.5039H146.758V88.8164H146.891C147.094 88.3529 147.401 87.9909 147.812 87.7305C148.224 87.4701 148.737 87.3398 149.352 87.3398C150.305 87.3398 151.034 87.6159 151.539 88.168C152.044 88.7201 152.297 89.5039 152.297 90.5195V96.043H150.352V90.9727C150.352 90.306 150.211 89.806 149.93 89.4727C149.654 89.1393 149.221 88.9727 148.633 88.9727C148.247 88.9727 147.914 89.0586 147.633 89.2305C147.352 89.4023 147.135 89.6445 146.984 89.957C146.833 90.2695 146.758 90.6393 146.758 91.0664V96.043H144.812Z" fill="white"/>
+<path d="M154.797 96.043V84.7695H156.812V94.3477H161.977V96.043H154.797Z" fill="white"/>
+<path d="M163.977 96.043V87.5039H165.914V96.043H163.977ZM164.953 86.0742C164.635 86.0742 164.362 85.9622 164.133 85.7383C163.904 85.5143 163.789 85.2461 163.789 84.9336C163.789 84.6107 163.904 84.3398 164.133 84.1211C164.362 83.8971 164.635 83.7852 164.953 83.7852C165.271 83.7852 165.542 83.8971 165.766 84.1211C165.995 84.3398 166.109 84.6107 166.109 84.9336C166.109 85.2461 165.995 85.5143 165.766 85.7383C165.542 85.9622 165.271 86.0742 164.953 86.0742Z" fill="white"/>
+<path d="M168.312 96.043V87.5039H170.258V88.8164H170.391C170.594 88.3529 170.901 87.9909 171.312 87.7305C171.724 87.4701 172.237 87.3398 172.852 87.3398C173.805 87.3398 174.534 87.6159 175.039 88.168C175.544 88.7201 175.797 89.5039 175.797 90.5195V96.043H173.852V90.9727C173.852 90.306 173.711 89.806 173.43 89.4727C173.154 89.1393 172.721 88.9727 172.133 88.9727C171.747 88.9727 171.414 89.0586 171.133 89.2305C170.852 89.4023 170.635 89.6445 170.484 89.957C170.333 90.2695 170.258 90.6393 170.258 91.0664V96.043H168.312Z" fill="white"/>
+<path d="M178.172 96.043V84.1992H180.117V96.043H178.172ZM183.539 96.043L180.664 92.168L182.109 90.9805L185.875 96.043H183.539ZM179.953 93.2148L179.883 91.0117H180.25L183.398 87.5039H185.648L181.938 91.4023L181.047 92.0977L179.953 93.2148Z" fill="white"/>
+<path d="M206.107 89.9997C205.464 89.9977 204.945 89.4738 204.947 88.8294L204.95 87.5625L200.821 91.6997C200.366 92.1553 199.629 92.1553 199.174 91.6997C198.72 91.2441 198.72 90.5054 199.174 90.0498L203.3 85.9164L202.035 85.9164C201.392 85.9164 200.871 85.3941 200.871 84.7497C200.871 84.1054 201.392 83.5831 202.035 83.5831L207.292 83.583L207.275 88.8366C207.274 89.4809 206.751 90.0017 206.107 89.9997Z" fill="white"/>
+<path d="M195.187 85.3331C194.785 85.3331 194.458 85.6595 194.458 86.0622V95.6872C194.458 96.09 194.785 96.4164 195.187 96.4164H204.812C205.215 96.4164 205.542 96.09 205.542 95.6872V93.0548C205.542 92.6521 205.215 92.3256 204.812 92.3256C204.41 92.3256 204.083 92.6521 204.083 93.0548V94.9581H195.917V86.7914H197.812C198.215 86.7914 198.542 86.465 198.542 86.0622C198.542 85.6595 198.215 85.3331 197.812 85.3331H195.187Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1542_1840">
+<rect width="312" height="180" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/pages/visual-test/ButtonLink-dark.js b/docs/pages/visual-test/ButtonLink-dark.js
new file mode 100644
index 0000000000..fa38fb41c7
--- /dev/null
+++ b/docs/pages/visual-test/ButtonLink-dark.js
@@ -0,0 +1,22 @@
+// @flow strict
+import { type Node } from 'react';
+import { Box, ButtonLink, ColorSchemeProvider } from 'gestalt';
+
+export default function Snapshot(): Node {
+  return (
+    <ColorSchemeProvider colorScheme="dark">
+      <Box color="default" display="inlineBlock" padding={1}>
+        <ButtonLink
+          accessibilityLabel="Visit Pinterest"
+          iconEnd="visit"
+          size="lg"
+          color="red"
+          text="Visit Pinterest"
+          rel="nofollow"
+          target="blank"
+          href="#"
+        />
+      </Box>
+    </ColorSchemeProvider>
+  );
+}
diff --git a/docs/pages/visual-test/ButtonLink.js b/docs/pages/visual-test/ButtonLink.js
new file mode 100644
index 0000000000..7428a960d4
--- /dev/null
+++ b/docs/pages/visual-test/ButtonLink.js
@@ -0,0 +1,20 @@
+// @flow strict
+import { type Node } from 'react';
+import { Box, ButtonLink } from 'gestalt';
+
+export default function Snapshot(): Node {
+  return (
+    <Box padding={1}>
+      <ButtonLink
+        accessibilityLabel="Visit Pinterest"
+        iconEnd="visit"
+        size="lg"
+        color="red"
+        text="Visit Pinterest"
+        rel="nofollow"
+        target="blank"
+        href="#"
+      />
+    </Box>
+  );
+}
diff --git a/docs/pages/web/button.js b/docs/pages/web/button.js
index 80a16b578b..30ab5e282b 100644
--- a/docs/pages/web/button.js
+++ b/docs/pages/web/button.js
@@ -1,6 +1,6 @@
 // @flow strict
 import { type Node } from 'react';
-import { Button, SlimBanner } from 'gestalt';
+import { Button, Link, SlimBanner, Text } from 'gestalt';
 import AccessibilitySection from '../../docs-components/AccessibilitySection.js';
 import CombinationNew from '../../docs-components/CombinationNew.js';
 import docGen, { type DocGen, type DocType } from '../../docs-components/docgen.js';
@@ -22,9 +22,7 @@ import keepSimpleTextDont from '../../examples/button/keepSimpleTextDont.js';
 import main from '../../examples/button/main.js';
 import placePrimaryButtonDo from '../../examples/button/placePrimaryButtonDo.js';
 import placePrimaryButtonDont from '../../examples/button/placePrimaryButtonDont.js';
-import relAndTargetExample from '../../examples/button/relAndTargetExample.js';
 import roleButtonExample from '../../examples/button/roleButtonExample.js';
-import roleLinkExample from '../../examples/button/roleLinkExample.js';
 import selectedStateExample from '../../examples/button/selectedStateExample.js';
 import showFullTextDo from '../../examples/button/showFullTextDo.js';
 import showFullTextDont from '../../examples/button/showFullTextDont.js';
@@ -34,6 +32,22 @@ const PREVIEW_HEIGHT = 300;
 export default function DocsPage({ generatedDocGen }: DocType): Node {
   return (
     <Page title={generatedDocGen?.displayName}>
+      <SlimBanner
+        type="info"
+        message={
+          <Text inline>
+            If you intend to use Button as a link, use
+            <Link
+              accessibilityLabel="Learn more about the ButtonLink component."
+              display="inline"
+              href="/web/ButtonLink"
+            >
+              ButtonLink
+            </Link>
+            instead.
+          </Text>
+        }
+      />
       <PageHeader name={generatedDocGen?.displayName} description={generatedDocGen?.description}>
         <SandpackExample code={main} name="Main Button example" hideEditor previewHeight={150} />
       </PageHeader>
@@ -165,7 +179,10 @@ export default function DocsPage({ generatedDocGen }: DocType): Node {
             name: 'href',
             type: 'string',
             required: false,
-            description: ['Specifies a link URL. Required with `role="link"` Buttons.'],
+            description: [
+              'Specifies a link URL. Required with `role="link"` Buttons.',
+              '*This option is deprecated, use [ButtonLink](/web/ButtonLink) instead.*',
+            ],
           },
           {
             name: 'ref',
@@ -187,14 +204,20 @@ export default function DocsPage({ generatedDocGen }: DocType): Node {
             type: `'button' | 'link'`,
             required: false,
             defaultValue: 'button',
-            description: ['Use “link” to indicate Button that is acting as an `<a>` link.'],
+            description: [
+              'Use “link” to indicate Button that is acting as an `<a>` link.',
+              '*This option is deprecated, use [ButtonLink](/web/ButtonLink) instead.*',
+            ],
           },
           {
             name: 'rel',
             type: `'none' | 'nofollow'`,
             required: false,
             defaultValue: 'none',
-            description: 'Optional with link-role Buttons.',
+            description: [
+              'Optional with link-role Buttons.',
+              '*This option is deprecated, use [ButtonLink](/web/ButtonLink) instead.*',
+            ],
           },
           {
             name: 'target',
@@ -203,6 +226,7 @@ export default function DocsPage({ generatedDocGen }: DocType): Node {
             defaultValue: 'null',
             description: [
               'Indicates the browsing context where an href will be opened. Optional with `role="link"` Buttons.',
+              '*This option is deprecated, use [ButtonLink](/web/ButtonLink) instead.*',
             ],
           },
         ]}
@@ -510,35 +534,6 @@ If Button is used as a control Button to show/hide a Popover-based component, we
               <SandpackExample code={roleButtonExample} name="Role button example." />
             }
           />
-          <MainSection.Card
-            cardSize="md"
-            sandpackExample={<SandpackExample code={roleLinkExample} name="Role link example." />}
-          />
-        </MainSection.Subsection>
-
-        <MainSection.Subsection
-          title="rel and target"
-          description={`
-These optional props control the behavior of \`role="link"\` Buttons. External links commonly use \`target="_blank"\` to open the link in a new tab or window, and \`rel="nofollow"\` to provide hints for SEO.
-`}
-        >
-          <SlimBanner
-            iconAccessibilityLabel="Localize the default label"
-            message="Button with link role announces to assistive technologies that the link opens in a new tab. Localize the default label with DefaultLabelProvider."
-            type="recommendationBare"
-            helperLink={{
-              text: 'Learn more',
-              accessibilityLabel: 'Learn more about DefaultLabelProvider',
-              href: '/web/utilities/defaultlabelprovider',
-              onClick: () => {},
-            }}
-          />
-          <MainSection.Card
-            cardSize="lg"
-            sandpackExample={
-              <SandpackExample code={relAndTargetExample} name="Rel and target example." />
-            }
-          />
         </MainSection.Subsection>
 
         <MainSection.Subsection
@@ -636,6 +631,9 @@ To control focus or position anchored components relative to Button, use \`ref\`
       <MainSection name="Related">
         <MainSection.Subsection
           description={`
+**[ButtonLink](/web/buttonlink)**
+Use ButtonLink when a link is needed instead of an action.
+
 **[ButtonGroup](/web/buttongroup)**
 When displaying multiple Buttons in a layout, use ButtonGroup to ensure consistent spacing and wrapping behavior.
 
diff --git a/docs/pages/web/buttonlink.js b/docs/pages/web/buttonlink.js
new file mode 100644
index 0000000000..8b5a784584
--- /dev/null
+++ b/docs/pages/web/buttonlink.js
@@ -0,0 +1,88 @@
+// @flow strict
+import { type Node } from 'react';
+import { SlimBanner } from 'gestalt';
+import AccessibilitySection from '../../docs-components/AccessibilitySection.js';
+import docGen, { type DocGen, type DocType } from '../../docs-components/docgen.js';
+import GeneratedPropTable from '../../docs-components/GeneratedPropTable.js';
+import MainSection from '../../docs-components/MainSection.js';
+import Page from '../../docs-components/Page.js';
+import PageHeader from '../../docs-components/PageHeader.js';
+import QualityChecklist from '../../docs-components/QualityChecklist.js';
+import SandpackExample from '../../docs-components/SandpackExample.js';
+import main from '../../examples/buttonlink/main.js';
+import relAndTargetExample from '../../examples/buttonlink/relAndTargetExample.js';
+
+export default function DocsPage({ generatedDocGen }: DocType): Node {
+  return (
+    <Page title={generatedDocGen?.displayName}>
+      <PageHeader name={generatedDocGen?.displayName} description={generatedDocGen?.description}>
+        <SandpackExample code={main} name="Main Button example" hideEditor previewHeight={150} />
+      </PageHeader>
+
+      <GeneratedPropTable generatedDocGen={generatedDocGen} />
+
+      <MainSection name="Usage guidelines" description="See [Button](/web/button)." />
+
+      <MainSection name="Variants">
+        <MainSection.Subsection
+          title="rel and target"
+          description={`
+These optional props control the behavior of ButtonLink. External links commonly use \`target="_blank"\` to open the link in a new tab or window, and \`rel="nofollow"\` to provide hints for SEO.
+`}
+        >
+          <SlimBanner
+            iconAccessibilityLabel="Localize the default label"
+            message="ButtonLink announces to assistive technologies that the link opens in a new tab. Localize the default label with DefaultLabelProvider."
+            type="recommendationBare"
+            helperLink={{
+              text: 'Learn more',
+              accessibilityLabel: 'Learn more about DefaultLabelProvider',
+              href: '/web/utilities/defaultlabelprovider',
+              onClick: () => {},
+            }}
+          />
+          <MainSection.Card
+            cardSize="lg"
+            sandpackExample={
+              <SandpackExample code={relAndTargetExample} name="Rel and target example." />
+            }
+          />
+        </MainSection.Subsection>
+      </MainSection>
+
+      <AccessibilitySection name={generatedDocGen?.displayName} />
+
+      <QualityChecklist component={generatedDocGen?.displayName} />
+      <MainSection name="Related">
+        <MainSection.Subsection
+          description={`
+**[Button](/web/button)**
+Use Button when an action is needed instead of a link.
+
+**[ButtonGroup](/web/buttongroup)**
+When displaying multiple Buttons in a layout, use ButtonGroup to ensure consistent spacing and wrapping behavior.
+
+**[IconButton](/web/iconbutton)**
+Use IconButton when only an icon is needed instead of text.
+
+**[TapArea](/web/taparea)**
+Use TapArea to make non-button elements interactive, like an Image. This ensures the element interaction is accessible and uses Gestalt styles.
+
+**[Tabs](/web/tabs)**
+Tabs are intended for page-level navigation between multiple URLs.
+
+**[GlobalEventsHandlerProvider](/web/utilities/globaleventshandlerprovider#Link-handlers)**
+GlobalEventsHandlerProvider allows external link navigation control across all children components with link behavior.
+See [GlobalEventsHandlerProvider](/web/utilities/globaleventshandlerprovider#Link-handlers) to learn more about link navigation.
+      `}
+        />
+      </MainSection>
+    </Page>
+  );
+}
+
+export async function getServerSideProps(): Promise<{| props: {| generatedDocGen: DocGen |} |}> {
+  return {
+    props: { generatedDocGen: await docGen('ButtonLink') },
+  };
+}
diff --git a/packages/gestalt/src/ButtonLink.js b/packages/gestalt/src/ButtonLink.js
new file mode 100644
index 0000000000..86c03d9171
--- /dev/null
+++ b/packages/gestalt/src/ButtonLink.js
@@ -0,0 +1,194 @@
+// @flow strict
+import { type AbstractComponent, forwardRef, type Node, useImperativeHandle, useRef } from 'react';
+import getAriaLabel from './accessibility/getAriaLabel.js';
+import NewTabAccessibilityLabel from './accessibility/NewTabAccessibilityLabel.js';
+import { useColorScheme } from './contexts/ColorSchemeProvider.js';
+import { useDefaultLabelContext } from './contexts/DefaultLabelProvider.js';
+import Flex from './Flex.js';
+import Icon from './Icon.js';
+import icons from './icons/index.js';
+import InternalLink from './Link/InternalLink.js';
+import Text from './Text.js';
+
+const DEFAULT_TEXT_COLORS = {
+  blue: 'inverse',
+  gray: 'default',
+  red: 'inverse',
+  transparent: 'default',
+  semiTransparentWhite: 'default',
+  transparentWhiteText: 'inverse',
+  white: 'default',
+};
+
+const SIZE_NAME_TO_PIXEL = {
+  sm: 10,
+  md: 12,
+  lg: 12,
+};
+
+type ButtonProps = {|
+  /**
+   * Label to provide more context around Button’s function or purpose. See the [Accessibility guidelines](/foundations/accessibility) to learn more.,
+   */
+  accessibilityLabel?: string,
+  /**
+   * The background color of Button.
+   */
+  color?:
+    | 'gray'
+    | 'red'
+    | 'blue'
+    | 'transparent'
+    | 'semiTransparentWhite'
+    | 'transparentWhiteText'
+    | 'white',
+  /**
+   * Available for testing purposes, if needed. Consider [better queries](https://testing-library.com/docs/queries/about/#priority) before using this prop.
+   */
+  dataTestId?: string,
+  /**
+   * Indicates if Button is disabled. Disabled Buttons are inactive and cannot be interacted with.
+   */
+  disabled?: boolean,
+  /**
+   * An icon displayed after the text to help clarify the usage of Button. See the [icon variant](#Icons) to learn more.
+   */
+  iconEnd?: $Keys<typeof icons>,
+  /**
+   * Default Buttons are sized by the text within the Button whereas full-width Buttons expand to the full width of their container.
+   */
+  fullWidth?: boolean,
+  /**
+   * Default Buttons are sized by the text within the Button whereas full-width Buttons expand to the full width of their container.
+   */
+  tabIndex?: -1 | 0,
+  /**
+   * Callback invoked when the user clicks (press and release) on Button with the mouse or keyboard. Required with `role="button"` or `type="button"` Buttons.
+     See [GlobalEventsHandlerProvider](/web/utilities/globaleventshandlerprovider#Link-handlers) to learn more about link navigation.
+   */
+  onClick?: ({|
+    event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement>,
+    dangerouslyDisableOnNavigation: () => void,
+  |}) => void,
+  /**
+   * sm: 32px, md: 40px, lg: 48px
+   */
+  size?: 'sm' | 'md' | 'lg',
+  /**
+   * Text to render inside the Button to convey the function and purpose of the Button.
+   */
+  text: string,
+  /**
+   * Specifies a link URL.
+   */
+  href: string,
+  /**
+   * Provides hints for SEO. See the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#rel) to learn more.
+   */
+  rel?: 'none' | 'nofollow',
+  /**
+   * Indicates the browsing context where an href will be opened:
+- 'null' opens the anchor in the same window.
+- 'blank' opens the anchor in a new window.
+- 'self' opens an anchor in the same frame.
+   */
+  target?: null | 'self' | 'blank',
+|};
+
+const ButtonLinkWithForwardRef: AbstractComponent<ButtonProps, HTMLAnchorElement> = forwardRef<
+  ButtonProps,
+  HTMLAnchorElement,
+>(function ButtonLink(
+  {
+    accessibilityLabel,
+    color = 'gray',
+    dataTestId,
+    disabled = false,
+    fullWidth = false,
+    iconEnd,
+    onClick,
+    tabIndex = 0,
+    size = 'md',
+    text,
+    href,
+    rel = 'none',
+    target = null,
+  }: ButtonProps,
+  ref,
+): Node {
+  const innerRef = useRef<null | HTMLAnchorElement>(null);
+
+  // When using both forwardRef and innerRef, React.useimperativehandle() allows a parent component
+  // that renders <ButtonLink ref={inputRef} /> to call inputRef.current.focus()
+  useImperativeHandle(ref, () => innerRef.current);
+
+  const { accessibilityNewTabLabel } = useDefaultLabelContext('Link');
+
+  const { name: colorSchemeName } = useColorScheme();
+  // We need to make a few exceptions for accessibility reasons in darkMode for red buttons
+  const isDarkMode = colorSchemeName === 'darkMode';
+  const isDarkModeRed = isDarkMode && color === 'red';
+  const isDarkModeBlue = isDarkMode && color === 'blue';
+
+  let colorClass = color === 'transparentWhiteText' ? 'transparent' : color;
+  if (isDarkModeRed) {
+    colorClass = 'darkModeRed';
+  }
+  const textColor =
+    (disabled && 'subtle') ||
+    ((isDarkModeRed || isDarkModeBlue) && 'default') ||
+    DEFAULT_TEXT_COLORS[color];
+  const ariaLabel = getAriaLabel({ target, accessibilityLabel, accessibilityNewTabLabel });
+
+  const handleClick = ({
+    event,
+    dangerouslyDisableOnNavigation,
+  }: {|
+    dangerouslyDisableOnNavigation: () => void,
+    event: SyntheticKeyboardEvent<HTMLAnchorElement> | SyntheticMouseEvent<HTMLAnchorElement>,
+  |}) =>
+    onClick
+      ? onClick({
+          event,
+          dangerouslyDisableOnNavigation: dangerouslyDisableOnNavigation ?? (() => {}),
+        })
+      : undefined;
+
+  return (
+    <InternalLink
+      accessibilityLabel={ariaLabel}
+      colorClass={colorClass}
+      dataTestId={dataTestId}
+      disabled={disabled}
+      fullWidth={fullWidth}
+      href={href}
+      onClick={handleClick}
+      ref={innerRef}
+      rel={rel}
+      tabIndex={tabIndex}
+      selected={false}
+      size={size}
+      target={target}
+      wrappedComponent="button"
+    >
+      <Flex alignItems="center" gap={{ row: 2, column: 0 }} justifyContent="center">
+        <Text align="center" color={textColor} overflow="normal" weight="bold">
+          {text}
+        </Text>
+        {iconEnd ? (
+          <Icon
+            accessibilityLabel=""
+            color={textColor}
+            icon={iconEnd}
+            size={SIZE_NAME_TO_PIXEL[size]}
+          />
+        ) : null}
+      </Flex>
+      <NewTabAccessibilityLabel target={target} />
+    </InternalLink>
+  );
+});
+
+ButtonLinkWithForwardRef.displayName = 'ButtonLink';
+
+export default ButtonLinkWithForwardRef;
diff --git a/packages/gestalt/src/index.js b/packages/gestalt/src/index.js
index 48b93c841b..c1b42361b9 100644
--- a/packages/gestalt/src/index.js
+++ b/packages/gestalt/src/index.js
@@ -7,6 +7,7 @@ import Badge from './Badge.js';
 import Box from './Box.js';
 import Button from './Button.js';
 import ButtonGroup from './ButtonGroup.js';
+import ButtonLink from './ButtonLink.js';
 import Callout from './Callout.js';
 import Checkbox from './Checkbox.js';
 import Collage from './Collage.js';
@@ -86,6 +87,7 @@ export {
   Box,
   Button,
   ButtonGroup,
+  ButtonLink,
   Callout,
   Checkbox,
   Collage,
diff --git a/playwright/accessibility/web__buttonlink.spec.mjs b/playwright/accessibility/web__buttonlink.spec.mjs
new file mode 100644
index 0000000000..930e0c4efe
--- /dev/null
+++ b/playwright/accessibility/web__buttonlink.spec.mjs
@@ -0,0 +1,8 @@
+// @flow strict
+import { test } from '@playwright/test';
+import expectAccessiblePage from './expectAccessiblePage.mjs';
+
+test('Web ButtonLink Accessibility check', async ({ page }) => {
+  await page.goto('/web/buttonLink');
+  await expectAccessiblePage({ page });
+});
diff --git a/playwright/visual-test/ButtonLink-dark.spec.mjs b/playwright/visual-test/ButtonLink-dark.spec.mjs
new file mode 100644
index 0000000000..231e89a1ba
--- /dev/null
+++ b/playwright/visual-test/ButtonLink-dark.spec.mjs
@@ -0,0 +1,8 @@
+// @flow strict
+import { expect, test } from '@playwright/test';
+
+test('Button dark mode visual regression check', async ({ page }) => {
+  await page.goto('/visual-test/ButtonLink-dark');
+  const locator = page.locator('[data-test-id="visual-test"]');
+  await expect(locator).toHaveScreenshot('ButtonLink-dark.png');
+});
diff --git a/playwright/visual-test/ButtonLink-dark.spec.mjs-snapshots/ButtonLink-dark-chromium-darwin.png b/playwright/visual-test/ButtonLink-dark.spec.mjs-snapshots/ButtonLink-dark-chromium-darwin.png
new file mode 100644
index 0000000000..91ea3e8ed8
Binary files /dev/null and b/playwright/visual-test/ButtonLink-dark.spec.mjs-snapshots/ButtonLink-dark-chromium-darwin.png differ
diff --git a/playwright/visual-test/ButtonLink.spec.mjs b/playwright/visual-test/ButtonLink.spec.mjs
new file mode 100644
index 0000000000..dbf4ea609c
--- /dev/null
+++ b/playwright/visual-test/ButtonLink.spec.mjs
@@ -0,0 +1,8 @@
+// @flow strict
+import { expect, test } from '@playwright/test';
+
+test('ButtonLink visual regression check', async ({ page }) => {
+  await page.goto('/visual-test/ButtonLink');
+  const locator = page.locator('[data-test-id="visual-test"]');
+  await expect(locator).toHaveScreenshot('ButtonLink.png');
+});
diff --git a/playwright/visual-test/ButtonLink.spec.mjs-snapshots/ButtonLink-chromium-darwin.png b/playwright/visual-test/ButtonLink.spec.mjs-snapshots/ButtonLink-chromium-darwin.png
new file mode 100644
index 0000000000..5b81d144e5
Binary files /dev/null and b/playwright/visual-test/ButtonLink.spec.mjs-snapshots/ButtonLink-chromium-darwin.png differ