diff --git a/.changeset/calm-donkeys-deny.md b/.changeset/calm-donkeys-deny.md
new file mode 100644
index 000000000..620e55c02
--- /dev/null
+++ b/.changeset/calm-donkeys-deny.md
@@ -0,0 +1,6 @@
+---
+"@hopper-ui/components": patch
+"docs": patch
+---
+
+Add isExternal prop to LinkButton to simplify opening a LinkButton to an external tab
diff --git a/apps/docs/content/components/buttons/LinkButton.mdx b/apps/docs/content/components/buttons/LinkButton.mdx
index 9f312c4ea..b9ba362eb 100644
--- a/apps/docs/content/components/buttons/LinkButton.mdx
+++ b/apps/docs/content/components/buttons/LinkButton.mdx
@@ -62,7 +62,7 @@ A link button can be disabled.
### External
-Add `rel="noopener noreferrer"` and `target="_blank"` attributes to render and external link button.
+Add isExternal attributes to render an external link button.
diff --git a/apps/docs/examples/Preview.ts b/apps/docs/examples/Preview.ts
index 9bca98f24..4447d41c4 100644
--- a/apps/docs/examples/Preview.ts
+++ b/apps/docs/examples/Preview.ts
@@ -491,15 +491,6 @@ export const Previews: Record = {
"checkbox/docs/checkboxgroup/itemsDescription": {
component: lazy(() => import("@/../../packages/components/src/checkbox/docs/checkboxgroup/itemsDescription.tsx"))
},
- "ErrorMessage/docs/preview": {
- component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/preview.tsx"))
- },
- "ErrorMessage/docs/noicon": {
- component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/noicon.tsx"))
- },
- "ErrorMessage/docs/multipleerrors": {
- component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/multipleerrors.tsx"))
- },
"Form/docs/preview": {
component: lazy(() => import("@/../../packages/components/src/Form/docs/preview.tsx"))
},
@@ -521,12 +512,6 @@ export const Previews: Record = {
"Form/docs/fluid": {
component: lazy(() => import("@/../../packages/components/src/Form/docs/fluid.tsx"))
},
- "HelperMessage/docs/preview": {
- component: lazy(() => import("@/../../packages/components/src/HelperMessage/docs/preview.tsx"))
- },
- "HelperMessage/docs/noicon": {
- component: lazy(() => import("@/../../packages/components/src/HelperMessage/docs/noicon.tsx"))
- },
"inputs/docs/numberField/preview": {
component: lazy(() => import("@/../../packages/components/src/inputs/docs/numberField/preview.tsx"))
},
@@ -761,6 +746,21 @@ export const Previews: Record = {
"IconList/docs/size": {
component: lazy(() => import("@/../../packages/components/src/IconList/docs/size.tsx"))
},
+ "ErrorMessage/docs/preview": {
+ component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/preview.tsx"))
+ },
+ "ErrorMessage/docs/noicon": {
+ component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/noicon.tsx"))
+ },
+ "ErrorMessage/docs/multipleerrors": {
+ component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/multipleerrors.tsx"))
+ },
+ "HelperMessage/docs/preview": {
+ component: lazy(() => import("@/../../packages/components/src/HelperMessage/docs/preview.tsx"))
+ },
+ "HelperMessage/docs/noicon": {
+ component: lazy(() => import("@/../../packages/components/src/HelperMessage/docs/noicon.tsx"))
+ },
"layout/docs/flex/preview": {
component: lazy(() => import("@/../../packages/components/src/layout/docs/flex/preview.tsx"))
},
diff --git a/packages/components/src/buttons/docs/linkButton/external.tsx b/packages/components/src/buttons/docs/linkButton/external.tsx
index f3e25cc4b..a90ea8bf2 100644
--- a/packages/components/src/buttons/docs/linkButton/external.tsx
+++ b/packages/components/src/buttons/docs/linkButton/external.tsx
@@ -3,7 +3,7 @@ import { NewTabIcon } from "@hopper-ui/icons";
export default function Example() {
return (
-
+
Learn more
diff --git a/packages/components/src/buttons/src/LinkButton.tsx b/packages/components/src/buttons/src/LinkButton.tsx
index 05c4a1273..91ca7e796 100644
--- a/packages/components/src/buttons/src/LinkButton.tsx
+++ b/packages/components/src/buttons/src/LinkButton.tsx
@@ -50,6 +50,11 @@ export interface LinkButtonProps extends StyledComponentProps {
* Whether or not the button takes up the width of its container.
*/
isFluid?: ResponsiveProp;
+
+ /**
+ * Whether the button should open in a new tab.
+ */
+ isExternal?: boolean;
}
function LinkButton(props: LinkButtonProps, ref: ForwardedRef) {
@@ -62,6 +67,9 @@ function LinkButton(props: LinkButtonProps, ref: ForwardedRef
className,
children: childrenProp,
size: sizeProp,
+ isExternal,
+ rel,
+ target,
isFluid: isFluidProp,
variant = "primary",
style: styleProp,
@@ -134,6 +142,8 @@ function LinkButton(props: LinkButtonProps, ref: ForwardedRef
>
;