5 files changed, 64 insertions, 7 deletions
diff --git a/src/components/atoms/buttons/button-link.stories.tsx b/src/components/atoms/buttons/button-link.stories.tsx
index d4df676..6fe786b 100644
--- a/src/components/atoms/buttons/button-link.stories.tsx
+++ b/src/components/atoms/buttons/button-link.stories.tsx
@@ -43,6 +43,21 @@ export default {
         required: false,
       },
     },
+    shape: {
+      control: {
+        type: 'select',
+      },
+      description: 'The link shape.',
+      options: ['rectangle', 'square'],
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 'rectangle' },
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     target: {
       control: {
         type: null,
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>
   );
 };
diff --git a/src/components/atoms/buttons/button.stories.tsx b/src/components/atoms/buttons/button.stories.tsx
index 5af61bd..bec5e5d 100644
--- a/src/components/atoms/buttons/button.stories.tsx
+++ b/src/components/atoms/buttons/button.stories.tsx
@@ -75,6 +75,21 @@ export default {
         required: false,
       },
     },
+    shape: {
+      control: {
+        type: 'select',
+      },
+      description: 'The link shape.',
+      options: ['rectangle', 'square'],
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 'rectangle' },
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     type: {
       control: {
         type: 'select',
diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx
index 420ee74..08b8d67 100644
--- a/src/components/atoms/buttons/button.tsx
+++ b/src/components/atoms/buttons/button.tsx
@@ -19,6 +19,10 @@ export type ButtonProps = {
    */
   onClick?: MouseEventHandler<HTMLButtonElement>;
   /**
+   * Button shape. Default: rectangle.
+   */
+  shape?: 'rectangle' | 'square';
+  /**
    * Button type attribute. Default: button.
    */
   type?: 'button' | 'reset' | 'submit';
@@ -33,16 +37,18 @@ const Button: FC<ButtonProps> = ({
   children,
   disabled = false,
   kind = 'secondary',
+  shape = 'rectangle',
   type = 'button',
   ...props
 }) => {
   const kindClass = styles[`btn--${kind}`];
+  const shapeClass = styles[`btn--${shape}`];
 
   return (
     <button
       type={type}
       disabled={disabled}
-      className={`${styles.btn} ${kindClass}`}
+      className={`${styles.btn} ${kindClass} ${shapeClass}`}
       {...props}
     >
       {children}
diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss
index 9dddf48..6784de9 100644
--- a/src/components/atoms/buttons/buttons.module.scss
+++ b/src/components/atoms/buttons/buttons.module.scss
@@ -1,15 +1,24 @@
 @use "@styles/abstracts/functions" as fun;
 
 .btn {
-  display: block;
-  max-width: max-content;
-  padding: var(--spacing-2xs) var(--spacing-md);
+  display: inline-flex;
+  place-content: center;
+  align-items: center;
   border: none;
   border-radius: fun.convert-px(5);
   font-size: var(--font-size-md);
   font-weight: 600;
   transition: all 0.3s ease-in-out 0s;
 
+  &--rectangle {
+    padding: var(--spacing-2xs) var(--spacing-md);
+  }
+
+  &--square {
+    padding: var(--spacing-xs);
+    aspect-ratio: 1 / 1;
+  }
+
   &:disabled {
     cursor: wait;
   }