aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/buttons/button-link.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/atoms/buttons/button-link.tsx')
-rw-r--r--src/components/atoms/buttons/button-link.tsx18
1 files changed, 15 insertions, 3 deletions
diff --git a/src/components/atoms/buttons/button-link.tsx b/src/components/atoms/buttons/button-link.tsx
index c33a4b7..47fe4b0 100644
--- a/src/components/atoms/buttons/button-link.tsx
+++ b/src/components/atoms/buttons/button-link.tsx
@@ -16,6 +16,10 @@ type ButtonLinkProps = {
*/
kind?: 'primary' | 'secondary';
/**
+ * ButtonLink shape. Default: rectangle.
+ */
+ shape?: 'rectangle' | 'square';
+ /**
* Define an URL as target.
*/
target: string;
@@ -30,18 +34,26 @@ const ButtonLink: FC<ButtonLinkProps> = ({
children,
target,
kind = 'secondary',
+ shape = 'rectangle',
external = false,
...props
}) => {
const kindClass = styles[`btn--${kind}`];
+ const shapeClass = styles[`btn--${shape}`];
return external ? (
- <a href={target} className={`${styles.btn} ${kindClass}`} {...props}>
+ <a
+ href={target}
+ className={`${styles.btn} ${kindClass} ${shapeClass}`}
+ {...props}
+ >
{children}
</a>
) : (
- <Link href={target} {...props}>
- <a className={`${styles.btn} ${kindClass}`}>{children}</a>
+ <Link href={target}>
+ <a className={`${styles.btn} ${kindClass} ${shapeClass}`} {...props}>
+ {children}
+ </a>
</Link>
);
};