Add Button component

components/Button.module.css

@@ -0,0 +1,32 @@
+.button,
+.link {
+  font-family: "Poppins", "sans-serif";
+  border-radius: calc(20rem / 16);
+  background-color: var(--blue-2);
+  color: white;
+  border: none;
+  outline: none;
+  transition-duration: 0.3s;
+  font-weight: normal;
+  text-align: center;
+}
+
+.button:hover,
+.link:hover {
+  background-color: var(--teal-2);
+  cursor: pointer;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.small {
+  padding: calc(5rem / 16) calc(30rem / 16);
+  font-size: calc(14rem / 16);
+}
+
+.normal {
+  padding: calc(10rem / 16) calc(50rem / 16);
+  font-size: calc(18rem / 16);
+}

components/Button.tsx

@@ -0,0 +1,40 @@
+import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
+import styles from "./Button.module.css";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  isLink?: false;
+}
+
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  isLink: true;
+}
+
+type Props = (ButtonProps | LinkProps) & { size?: "small" | "normal" };
+
+export function Button(props: Props) {
+  const btnSize = props.size ? props.size : "normal";
+  if (props.isLink) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { size, isLink, ...otherProps } = props;
+    return (
+      <a
+        {...otherProps}
+        target="_blank"
+        className={`${styles.link} ${styles[btnSize]} ${
+          otherProps.className ?? ""
+        }`}
+      />
+    );
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { size, isLink, ...otherProps } = props;
+    return (
+      <button
+        {...otherProps}
+        className={`${styles.button} ${styles[btnSize]} ${
+          otherProps.className ?? ""
+        }`}
+      />
+    );
+  }
+}

components/EventCard.module.css

@@ -21,7 +21,8 @@
 }
 
 .registerButton {
-  width: 100%;
+  display: block;
+  font-weight: bold;
 }
 
 .content > h1 {

components/EventCard.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react";
+import { Button } from "./Button";
 import styles from "./EventCard.module.css";
 
 import { EventSetting } from "./EventSetting";
@@ -29,11 +30,15 @@ export function EventCard({
       <aside>
         {poster && <Image alt={name} src={poster} />}
         {!poster && <div className={styles.spacer}></div>}
-        {/* TODO: use the <Button /> component */}
         {registerLink && (
-          <button className={styles.registerButton}>
-            <a href={registerLink}>Register</a>
-          </button>
+          <Button
+            isLink={true}
+            href={registerLink}
+            size="small"
+            className={styles.registerButton}
+          >
+            Register
+          </Button>
         )}
       </aside>
       <section className={styles.content}>

components/EventDescriptionCard.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-// import { Button } from "./Button";
+import { Button } from "./Button";
 import { Image } from "./Image";
 import { EventSetting } from "./EventSetting";
 import styles from "./EventDescriptionCard.module.css";
@@ -65,9 +65,9 @@ export function EventDescriptionCard({
         <footer>
           {registerLink && (
             <div className={styles.button}>
-              <button>
-                <a href={registerLink}>Register</a>
-              </button>
+              <Button isLink={true} href={registerLink} size="small">
+                Register
+              </Button>
             </div>
           )}
           {online && platformURL && (

components/playground.tsx

@@ -26,6 +26,7 @@ import { EventCard } from "./EventCard";
 import { EventDescriptionCard } from "./EventDescriptionCard";
 import { TeamMember } from "./TeamMember";
 import { TeamMemberCard } from "./TeamMemberCard";
+import { Button } from "./Button";
 
 const events = [
   { Content: OOTBReact, metadata: OOTBReactEventMetadata },
@@ -64,6 +65,31 @@ export function NewsCardDemo() {
   );
 }
 
+export function ButtonDemo() {
+  return (
+    <>
+      <h3>Standard buttons</h3>
+      <p>
+        <Button isLink={true} href="/">
+          Link
+        </Button>
+      </p>
+      <p>
+        <Button>Button</Button>
+      </p>
+      <h3>Small buttons</h3>
+      <p>
+        <Button isLink={true} href="/" size="small">
+          Small Link
+        </Button>
+      </p>
+      <p>
+        <Button size="small">Small Button</Button>
+      </p>
+    </>
+  );
+}
+
 export function EventDescriptionCardDemo() {
   return (
     <div className={styles.eventDescriptionCardDemo}>

pages/playground.mdx

@@ -5,6 +5,7 @@ import {
   EventCardDemo,
   TeamMemberDemo,
   TeamMemberCardDemo,
+  ButtonDemo,
 } from "../components/playground";
 
 import { TeamMemberCard } from "../components/TeamMemberCard";
@@ -28,6 +29,14 @@ unavailable
 
 ---
 
+## `<Button />`
+
+The `<Button />` is customizable in size and in whether it is an anchor tag or a button tag.
+
+<ButtonDemo />
+
+---
+
 ## `<EventDescriptionCard />`
 
 The `<EventDescriptionCard />` component is used on the home page, and uses the
@@ -48,7 +57,7 @@ The `<EventCard />` component is used on the events page, and uses the
 
 ## `<TeamMember />`
 
-The `<TeamMember />` component has an image of the team member along with their name and role. 
+The `<TeamMember />` component has an image of the team member along with their name and role.
 It is used on the Meet the Team page for non executive members.
 
 <TeamMemberDemo />