diff --git a/packages/eds-core-react/src/components/Button/Button.docs.mdx b/packages/eds-core-react/src/components/Button/Button.docs.mdx
index 8241e1d5d6..919e5375d6 100644
--- a/packages/eds-core-react/src/components/Button/Button.docs.mdx
+++ b/packages/eds-core-react/src/components/Button/Button.docs.mdx
@@ -75,3 +75,19 @@ Example All button combinations.
 
 Compact `Button` using `EdsProvider`.
 <Story id="inputs-button--compact" />
+
+### Using the 'as' prop to render as another component
+
+The `as` prop allows you to render the `Button` as another html element or even react component. 
+
+```tsx
+<Button as="a" href="/about" target="_blank" rel="noreferrer">About</Button>
+```
+This is especially useful if you want to use the `Button` as as a navigation component for a third party routing library such as react-router.
+
+```tsx
+import { Link } from "react-router-dom"
+import { Button } from '@equinor/eds-core-react'
+
+<Button as={Link} to="/about">About</Button>
+```
diff --git a/packages/eds-core-react/src/components/Button/Button.stories.tsx b/packages/eds-core-react/src/components/Button/Button.stories.tsx
index 97a96e84d0..15384bc5a2 100644
--- a/packages/eds-core-react/src/components/Button/Button.stories.tsx
+++ b/packages/eds-core-react/src/components/Button/Button.stories.tsx
@@ -40,9 +40,6 @@ export default {
 export const Introduction: Story<ButtonProps> = (args) => {
   return <Button {...args}>You can control me</Button>
 }
-Introduction.args = {
-  as: undefined,
-}
 Introduction.decorators = [
   (Story) => (
     <Stack>
diff --git a/packages/eds-core-react/src/components/Button/Button.test.tsx b/packages/eds-core-react/src/components/Button/Button.test.tsx
index d95e168859..f2fc2f3c4f 100644
--- a/packages/eds-core-react/src/components/Button/Button.test.tsx
+++ b/packages/eds-core-react/src/components/Button/Button.test.tsx
@@ -19,6 +19,13 @@ const StyledButton = styled(Button)`
 const MarginButton = styled(Button)`
   margin: 12px;
 `
+const LinkButton = ({ to }: { to: string }) => {
+  return (
+    <a href={to} target="_blank" rel="noreferrer">
+      click
+    </a>
+  )
+}
 
 afterEach(cleanup)
 
@@ -135,6 +142,13 @@ describe('Button', () => {
 
     expect(button).toBeInTheDocument()
   })
+  it('Can be cast as another component', () => {
+    render(<Button as={LinkButton} to="/" />)
+    const button = screen.getByRole('link')
+
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveAttribute('target', '_blank')
+  })
   it('Can change margins', () => {
     render(<MarginButton>Test me!</MarginButton>)
     const button = screen.getByRole('button')
diff --git a/packages/eds-core-react/src/components/Button/Button.tsx b/packages/eds-core-react/src/components/Button/Button.tsx
index 0aefa87caa..40718192e4 100644
--- a/packages/eds-core-react/src/components/Button/Button.tsx
+++ b/packages/eds-core-react/src/components/Button/Button.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, ElementType, ButtonHTMLAttributes } from 'react'
+import { forwardRef, ButtonHTMLAttributes } from 'react'
 import styled, { css, ThemeProvider } from 'styled-components'
 import { token as buttonToken } from './tokens'
 import { ButtonTokenSet, ButtonToken } from './Button.types'
@@ -8,6 +8,7 @@ import {
   outlineTemplate,
   spacingsTemplate,
   useToken,
+  OverridableComponent,
 } from '@equinor/eds-utils'
 import { InnerFullWidth } from './InnerFullWidth'
 import { useEds } from '../EdsProvider'
@@ -70,6 +71,7 @@ const ButtonBase = styled.button(({ theme }: { theme: ButtonToken }) => {
   const { focus, hover, disabled } = states
 
   return css`
+    box-sizing: border-box;
     margin: 0;
     padding: 0;
     text-decoration: none;
@@ -156,8 +158,6 @@ export type ButtonProps = {
   href?: string
   /** Is the button disabled */
   disabled?: boolean
-  /** Change html element. */
-  as?: ElementType
   /** Type of button
    * @default 'button'
    */
@@ -166,8 +166,8 @@ export type ButtonProps = {
   fullWidth?: boolean
 } & ButtonHTMLAttributes<HTMLButtonElement>
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  function Button(
+export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
+  forwardRef(function Button(
     {
       color = 'primary',
       variant = 'contained',
@@ -183,8 +183,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     const { density } = useEds()
     const token = useToken({ density }, getToken(variant, color))
 
-    const as: ElementType =
-      href && !disabled ? 'a' : other.as ? other.as : 'button'
+    const as = href && !disabled ? 'a' : other.as ? other.as : 'button'
+
     const type = href || other.as ? undefined : 'button'
 
     tabIndex = disabled ? -1 : tabIndex
@@ -210,5 +210,4 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         </ButtonBase>
       </ThemeProvider>
     )
-  },
-)
+  })
diff --git a/packages/eds-core-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/eds-core-react/src/components/Button/__snapshots__/Button.test.tsx.snap
index e3af58dbd2..dfd579fb33 100644
--- a/packages/eds-core-react/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/eds-core-react/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -23,6 +23,7 @@ exports[`Button Matches snapshot 1`] = `
 }
 
 .c0 {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
   -webkit-text-decoration: none;
diff --git a/packages/eds-core-react/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/eds-core-react/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
index 29654a8463..bba339ea6d 100644
--- a/packages/eds-core-react/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/eds-core-react/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -23,6 +23,7 @@ exports[`Pagination Matches snapshot 1`] = `
 }
 
 .c3 {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
   -webkit-text-decoration: none;
diff --git a/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap b/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap
index 435f85cf92..698d218968 100644
--- a/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap
+++ b/packages/eds-core-react/src/components/Search/__snapshots__/Search.test.tsx.snap
@@ -23,6 +23,7 @@ exports[`Search Matches snapshot 1`] = `
 }
 
 .c3 {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
   -webkit-text-decoration: none;
diff --git a/packages/eds-core-react/src/components/Select/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap b/packages/eds-core-react/src/components/Select/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap
index b6cefbd97d..9074839c48 100644
--- a/packages/eds-core-react/src/components/Select/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap
+++ b/packages/eds-core-react/src/components/Select/MultiSelect/__snapshots__/MultiSelect.test.tsx.snap
@@ -63,6 +63,7 @@ exports[`MultiSelect Matches snapshot 2`] = `
 }
 
 .c0 {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
   -webkit-text-decoration: none;
diff --git a/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap b/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap
index 897bdf046d..b39446680f 100644
--- a/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap
+++ b/packages/eds-core-react/src/components/Select/SingleSelect/__snapshots__/SingleSelect.test.tsx.snap
@@ -130,6 +130,7 @@ exports[`SingleSelect Matches snapshot 1`] = `
 }
 
 .c6 {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
   -webkit-text-decoration: none;
diff --git a/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap b/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap
index f2b0b7c686..bfe6100965 100644
--- a/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap
+++ b/packages/eds-core-react/src/components/SideSheet/__snapshots__/SideSheet.test.tsx.snap
@@ -33,6 +33,7 @@ exports[`SideSheet Matches snapshot 1`] = `
 }
 
 .c3 {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
   -webkit-text-decoration: none;
diff --git a/packages/eds-utils/src/utils/index.ts b/packages/eds-utils/src/utils/index.ts
index 911dd9c403..b5eb547f0e 100644
--- a/packages/eds-utils/src/utils/index.ts
+++ b/packages/eds-utils/src/utils/index.ts
@@ -2,5 +2,6 @@ export * from './templates'
 export { joinHandlers } from './joinHandlers'
 export { mergeRefs } from './mergeRefs'
 export { setReactInputValue } from './setReactInputValue'
+export type { OverridableComponent } from './overridableComponent'
 
 export const trimSpaces = (text: string): string => text.replace(/ /g, '')
diff --git a/packages/eds-utils/src/utils/overridableComponent.ts b/packages/eds-utils/src/utils/overridableComponent.ts
new file mode 100644
index 0000000000..37d87eb7e5
--- /dev/null
+++ b/packages/eds-utils/src/utils/overridableComponent.ts
@@ -0,0 +1,12 @@
+import { RefAttributes, FC, ElementType, ComponentPropsWithRef } from 'react'
+
+export type OverridableComponent<Component, Element extends HTMLElement> = {
+  (props: Component & RefAttributes<Element>): ReturnType<FC>
+
+  <As extends ElementType>(
+    props: {
+      as: As
+    } & Component &
+      Omit<ComponentPropsWithRef<As>, keyof Component>,
+  ): ReturnType<FC>
+}