diff --git a/src/shared/Button.tsx b/src/shared/Button.tsx
new file mode 100644
index 0000000..ed534e9
--- /dev/null
+++ b/src/shared/Button.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { Route } from "@/routers/types";
+import Link from "next/link";
+import React, { ButtonHTMLAttributes, FC } from "react";
+
+export interface ButtonProps {
+  className?: string;
+  translate?: string;
+  sizeClass?: string;
+  fontSize?: string;
+  //
+  loading?: boolean;
+  disabled?: boolean;
+  type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+  href?: Route<string>;
+  targetBlank?: boolean;
+  onClick?: () => void;
+  children?: React.ReactNode;
+}
+
+const Button: FC<ButtonProps> = ({
+  className = "text-neutral-700 dark:text-neutral-200",
+  translate = "",
+  sizeClass = "px-4 py-3 sm:px-6",
+  fontSize = "text-sm sm:text-base font-medium",
+  disabled = false,
+  href,
+  children,
+  targetBlank,
+  type,
+  loading,
+  onClick = () => {},
+}) => {
+  const CLASSES = `nc-Button relative h-auto inline-flex items-center justify-center rounded-full transition-colors ${fontSize} ${sizeClass} ${translate} ${className} `;
+
+  const _renderLoading = () => {
+    return (
+      <svg
+        className="animate-spin -ml-1 mr-3 h-5 w-5"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="3"
+        ></circle>
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+    );
+  };
+
+  if (!!href) {
+    return (
+      <Link
+        href={href}
+        target={targetBlank ? "_blank" : undefined}
+        className={`${CLASSES} `}
+        onClick={onClick}
+        rel={targetBlank ? "noopener noreferrer" : undefined}
+      >
+        {children || `This is Link`}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      disabled={disabled || loading}
+      className={`${CLASSES}`}
+      onClick={onClick}
+      type={type}
+    >
+      {loading && _renderLoading()}
+      {children || `This is Button`}
+    </button>
+  );
+};
+
+export default Button;