chore: add a HelpButton component

I also added a new shape to the button base.

3 files changed, 17 insertions, 5 deletions

diff --git a/src/components/atoms/buttons/button.stories.tsx b/src/components/atoms/buttons/button.stories.tsx
index bec5e5d..9f4061b 100644
--- a/src/components/atoms/buttons/button.stories.tsx
+++ b/src/components/atoms/buttons/button.stories.tsx
@@ -80,7 +80,7 @@ export default {
         type: 'select',
       },
       description: 'The link shape.',
-      options: ['rectangle', 'square'],
+      options: ['circle', 'rectangle', 'square'],
       table: {
         category: 'Options',
         defaultValue: { summary: 'rectangle' },
diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx
index 08b8d67..ae4c894 100644
--- a/src/components/atoms/buttons/button.tsx
+++ b/src/components/atoms/buttons/button.tsx
@@ -3,9 +3,13 @@ import styles from './buttons.module.scss';
 
 export type ButtonProps = {
   /**
+   * Add additional classes to the button wrapper.
+   */
+  additionalClasses?: string;
+  /**
    * Button accessible label.
    */
-  'aria-label'?: string;
+  ariaLabel?: string;
   /**
    * Button state. Default: false.
    */
@@ -21,7 +25,7 @@ export type ButtonProps = {
   /**
    * Button shape. Default: rectangle.
    */
-  shape?: 'rectangle' | 'square';
+  shape?: 'circle' | 'rectangle' | 'square';
   /**
    * Button type attribute. Default: button.
    */
@@ -34,6 +38,8 @@ export type ButtonProps = {
  * Use a button as call to action.
  */
 const Button: FC<ButtonProps> = ({
+  additionalClasses,
+  ariaLabel,
   children,
   disabled = false,
   kind = 'secondary',
@@ -48,7 +54,8 @@ const Button: FC<ButtonProps> = ({
     <button
       type={type}
       disabled={disabled}
-      className={`${styles.btn} ${kindClass} ${shapeClass}`}
+      className={`${styles.btn} ${kindClass} ${shapeClass} ${additionalClasses}`}
+      aria-label={ariaLabel}
       {...props}
     >
       {children}
diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss
index 6784de9..a1c3dba 100644
--- a/src/components/atoms/buttons/buttons.module.scss
+++ b/src/components/atoms/buttons/buttons.module.scss
@@ -14,11 +14,16 @@
     padding: var(--spacing-2xs) var(--spacing-md);
   }
 
-  &--square {
+  &--square,
+  &--circle {
     padding: var(--spacing-xs);
     aspect-ratio: 1 / 1;
   }
 
+  &--circle {
+    border-radius: 50%;
+  }
+
   &:disabled {
     cursor: wait;
   }