Button

src/components/Inputs.tsx

@@ -1,4 +1,4 @@
-import { createRef, InputHTMLAttributes, useState } from "react"
+import { createRef, HTMLAttributes, InputHTMLAttributes, useState } from "react"
 import { overrideTailwindClasses } from '../general'
 import { SVGEye } from "./Icons"
 
@@ -73,4 +73,24 @@ export function InputPassword({ invalid, ...props }: InputProps) {
             </span>
         </span>
     )
+}
+
+interface ButtonProps extends HTMLAttributes<HTMLButtonElement> { }
+
+export function Button({ children, ...props }: ButtonProps) {
+    return (
+        <button className={`
+            rounded-full outline-none
+            bg-gray-800 focus:bg-gray-700
+            hover:bg-gray-700 active:bg-gray-800
+            fill-gray-400 focus:fill-gray-200
+            px-3 py-2
+            shadow-glow shadow-transparent
+            focus:outline-blue-500 focus:shadow-blue-500
+            transition-all
+        `}
+            {...props}>
+            {children}
+        </button>
+    )
 }