equinor · oddvernes · Aug 16, 2022 · Aug 11, 2022 · Aug 11, 2022 · Aug 11, 2022
@@ -75,3 +75,15 @@ 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. 
+This is useful if you want to use the button as as a navigation component for a third party routing library such as rect-router.
+
+```tsx
+import { Link } from "react-router-dom"
+import { Button } from '@equinor/eds-core-react'
+
+<Button as={Link} to="/about">About</Button>
+```
@@ -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>

@@ -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')

@@ -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>
     )
-  },
-)
+  })
@@ -23,6 +23,7 @@ exports[`Button Matches snapshot 1`] = `
 }
 
 .c0 {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
   -webkit-text-decoration: none;

@@ -23,6 +23,7 @@ exports[`Pagination Matches snapshot 1`] = `
 }
 
 .c3 {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
   -webkit-text-decoration: none;

@@ -23,6 +23,7 @@ exports[`Search Matches snapshot 1`] = `
 }
 
 .c3 {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
   -webkit-text-decoration: none;

@@ -63,6 +63,7 @@ exports[`MultiSelect Matches snapshot 2`] = `
 }
 
 .c0 {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
   -webkit-text-decoration: none;

@@ -130,6 +130,7 @@ exports[`SingleSelect Matches snapshot 1`] = `
 }
 
 .c6 {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
   -webkit-text-decoration: none;

@@ -33,6 +33,7 @@ exports[`SideSheet Matches snapshot 1`] = `
 }
 
 .c3 {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
   -webkit-text-decoration: none;

@@ -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, '')
@@ -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>
+}