diff --git a/src/dzeio/Button/Button.stories.tsx b/src/dzeio/Button/Button.stories.tsx
index b6c8ef9..107b8b2 100644
--- a/src/dzeio/Button/Button.stories.tsx
+++ b/src/dzeio/Button/Button.stories.tsx
@@ -25,3 +25,10 @@ WithImg.args = {
href: '/pouet',
block: true
}
+
+export const ExternalLinkButton = (args: any) => Button
+ExternalLinkButton.args = {
+ nomargintop: true,
+ href: 'https://example.com',
+ block: true
+}
diff --git a/src/dzeio/Button/index.tsx b/src/dzeio/Button/index.tsx
index 6c6bfe0..06b4446 100644
--- a/src/dzeio/Button/index.tsx
+++ b/src/dzeio/Button/index.tsx
@@ -1,5 +1,5 @@
import React, { FC } from 'react'
-import Link from 'next/link'
+import Link from '../Link'
import { ColorType, IconProps } from '../interfaces'
import { buildClassName } from '../Util'
import Image from '../Image'
@@ -57,8 +57,8 @@ export default class Button extends React.Component {
if (this.props.href) {
return (
-
- {inner}
+
+ {inner}
)
}
diff --git a/src/dzeio/Link/index.tsx b/src/dzeio/Link/index.tsx
index 88ebe6a..dcff89d 100644
--- a/src/dzeio/Link/index.tsx
+++ b/src/dzeio/Link/index.tsx
@@ -1,65 +1,65 @@
-import React from 'react'
-import NextLink from 'next/link'
-import { ExternalLink } from 'lucide-react'
-
-import css from './Link.module.styl'
-import { buildClassName } from '../Util'
-
-interface Props {
- linkProps?: React.DetailedHTMLProps, HTMLAnchorElement>
- href: string
- children?: React.ReactNode
- className?: string
- /**
- * Remove styling
- */
- noStyle?: boolean
-
- /**
- * Override external detection system
- */
- external?: boolean
-
- /**
- * force hiding the icon
- */
- hideIcon?: boolean
-}
-
-export default class Link extends React.Component {
-
- public render() {
- const isExternal = this.props.href.startsWith('http')
- const externalProps = this.props.external ? {
- rel: 'noreferrer nofollow',
- target: '_blank'
- } : {}
-
- if (isExternal) {
- // external link
- return (
-
- {this.props.children}
- {(this.props.external !== false && !this.props.hideIcon) && (
-
- )}
-
- )
- }
- return (
-
- {this.props.children}
-
- )
- }
-
-}
+import React from 'react'
+import NextLink from 'next/link'
+import { ExternalLink } from 'lucide-react'
+
+import css from './Link.module.styl'
+import { buildClassName } from '../Util'
+
+interface Props {
+ linkProps?: React.DetailedHTMLProps, HTMLAnchorElement>
+ href: string
+ children?: React.ReactNode
+ className?: string
+ /**
+ * Remove styling
+ */
+ noStyle?: boolean
+
+ /**
+ * Override external detection system
+ */
+ external?: boolean
+
+ /**
+ * force hiding the icon
+ */
+ hideIcon?: boolean
+}
+
+export default class Link extends React.Component {
+
+ public render() {
+ const isExternal = this.props.href.startsWith('http')
+ const externalProps = this.props.external ?? isExternal ? {
+ rel: 'noreferrer nofollow',
+ target: '_blank'
+ } : {}
+
+ if (isExternal) {
+ // external link
+ return (
+
+ {this.props.children}
+ {(this.props.external !== false && !this.props.hideIcon) && (
+
+ )}
+
+ )
+ }
+ return (
+
+ {this.props.children}
+
+ )
+ }
+
+}