refactor(ui): extract reusable component package

packages/ui/src/components/Button.tsx

@@ -0,0 +1,39 @@
+import type { ButtonHTMLAttributes } from "react";
+import { IconGlyph } from "./IconGlyph";
+
+export interface ButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+  label: string;
+  variant?: "primary" | "secondary" | "danger" | "ghost";
+  size?: "default" | "compact";
+  icon?: string;
+  loading?: boolean;
+  type?: "button" | "submit" | "reset";
+}
+
+export function Button({
+  label,
+  variant = "primary",
+  size = "default",
+  icon,
+  disabled = false,
+  loading = false,
+  type = "button",
+  className = "",
+  ...buttonProps
+}: ButtonProps) {
+  return (
+    <button
+      {...buttonProps}
+      className={className ? `ui-button ${className} ` : "ui-button "}
+      data-variant={variant}
+      data-size={size}
+      data-loading={loading}
+      disabled={disabled}
+      type={type}
+    >
+      {icon ? <IconGlyph name={icon} size="sm" /> : null}
+      <span>{loading ? "Loading" : label}</span>
+    </button>
+  );
+}