diff --git a/frontend/src/components/Button/Button.test.jsx b/frontend/src/components/Button/Button.test.tsx
similarity index 100%
rename from frontend/src/components/Button/Button.test.jsx
rename to frontend/src/components/Button/Button.test.tsx
diff --git a/frontend/src/components/Button/Button.jsx b/frontend/src/components/Button/Button.tsx
similarity index 77%
rename from frontend/src/components/Button/Button.jsx
rename to frontend/src/components/Button/Button.tsx
index 46ea0378d..6ddfc7f85 100644
--- a/frontend/src/components/Button/Button.jsx
+++ b/frontend/src/components/Button/Button.tsx
@@ -2,6 +2,16 @@ import React, { useRef } from "react";
 import classNames from "classnames";
 import { audioInitialized } from "../../util/audio";
 
+interface ButtonProps {
+    title: string;
+    onClick: (value: string) => void;
+    className?: string;
+    padding?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    value?: string;
+}
+
 // Button is a button that can only be clicked one time
 const Button = ({
     title,
@@ -11,7 +21,7 @@ const Button = ({
     style = {},
     disabled = false,
     value = "",
-}) => {
+}: ButtonProps) => {
     const clicked = useRef(false);
 
     // Only handle the first click
@@ -28,12 +38,12 @@ const Button = ({
     // Without the browser having registered any user interaction (e.g. click)
     const touchEvent = audioInitialized
         ? {
-              onTouchStart: (e) => {
-                  e.stopPropagation();
-                  clickOnce();
-                  return false;
-              },
-          }
+            onTouchStart: (e) => {
+                e.stopPropagation();
+                clickOnce();
+                return false;
+            },
+        }
         : {};
 
     return (