feat(component): add Button

components/Button/Button.js

@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+
+import styles from './Button.module.css';
+
+/**
+ * A reusable component for buttons.
+ *
+ * @param {boolean} isPrimary - Whether the button is primary or not. Defaults to false.
+ * @param className - An optional classname.
+ * @param {string} style - Custom styles to apply to the title.
+ *
+ * @example
+ * <Button isPrimary={true} onClick={(e) => alert(e.target.textContent)}>Pizza</Title>
+ *
+ */
+
+export default function Button(ctx) {
+	const { children, className, isPrimary, onClick } = ctx;
+	return (
+		<button className={classNames(styles.button, { [styles.primary]: isPrimary }, className)} onClick={onClick}>
+			{children}
+		</button>
+	);
+}

components/Button/Button.module.css

@@ -0,0 +1,23 @@
+.button {
+	appearance: none;
+	background: var(--bg-shade-3);
+	color: var(--text-shade-3);
+	border: 0;
+	border-radius: 6px;
+	padding: 12px 48px;
+	font-size: 1rem;
+	font-family: var(--font-family);
+	cursor: pointer;
+}
+
+.button:hover {
+	background: var(--bg-shade-3-5);
+}
+
+.button.primary {
+	background: var(--accent-shade-0);
+}
+
+.button.primary:hover {
+	background: var(--accent-shade-1);
+}