1 files changed, 64 insertions, 0 deletions
diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx
new file mode 100644
index 0000000..545c5c5
--- /dev/null
+++ b/src/components/atoms/buttons/button.tsx
@@ -0,0 +1,64 @@
+import { FC, MouseEventHandler } from 'react';
+import styles from './buttons.module.scss';
+
+export type ButtonProps = {
+  /**
+   * Set additional classnames to the button wrapper.
+   */
+  className?: string;
+  /**
+   * Button accessible label.
+   */
+  'aria-label'?: string;
+  /**
+   * Button state. Default: false.
+   */
+  disabled?: boolean;
+  /**
+   * Button kind. Default: secondary.
+   */
+  kind?: 'primary' | 'secondary' | 'tertiary' | 'neutral';
+  /**
+   * A callback function to handle click.
+   */
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  /**
+   * Button shape. Default: rectangle.
+   */
+  shape?: 'circle' | 'rectangle' | 'square' | 'initial';
+  /**
+   * Button type attribute. Default: button.
+   */
+  type?: 'button' | 'reset' | 'submit';
+};
+
+/**
+ * Button component
+ *
+ * Use a button as call to action.
+ */
+const Button: FC<ButtonProps> = ({
+  className = '',
+  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} ${shapeClass} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;