diff --git a/src/components/Button.module.css b/src/components/Button.module.css
new file mode 100644
index 0000000..9d5de36
--- /dev/null
+++ b/src/components/Button.module.css
@@ -0,0 +1,13 @@
+.button {
+  width: 100%;
+  background-color: var(--violet);
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--white);
+}
+
+.button:disabled {
+  background-color: var(--gray-400);
+  cursor: auto;
+}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..cf832c9
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,18 @@
+import { ButtonHTMLAttributes, PropsWithChildren } from 'react';
+import styles from './Button.module.css';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string;
+}
+
+export default function Button({
+  className = '',
+  children,
+  ...props
+}: PropsWithChildren<ButtonProps>) {
+  return (
+    <button className={`${styles.button} ${className}`} {...props}>
+      {children}
+    </button>
+  );
+}