aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/buttons/button-link
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/atoms/buttons/button-link')
-rw-r--r--src/components/atoms/buttons/button-link/button-link.tsx17
1 files changed, 17 insertions, 0 deletions
diff --git a/src/components/atoms/buttons/button-link/button-link.tsx b/src/components/atoms/buttons/button-link/button-link.tsx
index 96f5d3e..9ac3853 100644
--- a/src/components/atoms/buttons/button-link/button-link.tsx
+++ b/src/components/atoms/buttons/button-link/button-link.tsx
@@ -11,6 +11,14 @@ export type ButtonLinkProps = Omit<
*/
children: ReactNode;
/**
+ * Should the link be disabled?
+ *
+ * Be aware, if disable the link will be replaced by a `span` element.
+ *
+ * @default false
+ */
+ isDisabled?: boolean;
+ /**
* True if it is an external link.
*
* @default false
@@ -44,6 +52,7 @@ export const ButtonLink: FC<ButtonLinkProps> = ({
className = '',
kind = 'secondary',
shape = 'rectangle',
+ isDisabled = false,
isExternal = false,
rel = '',
to,
@@ -52,6 +61,14 @@ export const ButtonLink: FC<ButtonLinkProps> = ({
const kindClass = styles[`btn--${kind}`];
const shapeClass = styles[`btn--${shape}`];
const btnClass = `${styles.btn} ${kindClass} ${shapeClass} ${className}`;
+
+ if (isDisabled)
+ return (
+ <span {...props} className={btnClass} data-disabled>
+ {children}
+ </span>
+ );
+
const linkRel =
isExternal && !rel.includes('external') ? `external ${rel}` : rel;