domrichardson
76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
import { ButtonHTMLAttributes, forwardRef } from "react";
|
|
import { clsx } from "clsx";
|
|
|
|
type Variant = "primary" | "secondary" | "danger" | "ghost";
|
|
type Size = "sm" | "md" | "lg";
|
|
|
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: Variant;
|
|
size?: Size;
|
|
loading?: boolean;
|
|
}
|
|
|
|
const variantClasses: Record<Variant, string> = {
|
|
primary:
|
|
"bg-accent hover:bg-accent-hover text-white border-transparent",
|
|
secondary:
|
|
"bg-surface-2 hover:bg-[#2d3048] text-text-primary border-border",
|
|
danger:
|
|
"bg-danger hover:bg-danger-hover text-white border-transparent",
|
|
ghost:
|
|
"bg-transparent hover:bg-surface-2 text-text-secondary hover:text-text-primary border-transparent",
|
|
};
|
|
|
|
const sizeClasses: Record<Size, string> = {
|
|
sm: "px-3 py-1.5 text-sm",
|
|
md: "px-4 py-2 text-sm",
|
|
lg: "px-5 py-2.5 text-base",
|
|
};
|
|
|
|
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
(
|
|
{ variant = "primary", size = "md", loading, className, children, disabled, ...props },
|
|
ref
|
|
) => {
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
disabled={disabled || loading}
|
|
className={clsx(
|
|
"inline-flex items-center gap-2 rounded-lg border font-medium transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-background disabled:opacity-50 disabled:cursor-not-allowed",
|
|
variantClasses[variant],
|
|
sizeClasses[size],
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{loading && (
|
|
<svg
|
|
className="animate-spin h-4 w-4"
|
|
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="4"
|
|
/>
|
|
<path
|
|
className="opacity-75"
|
|
fill="currentColor"
|
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
/>
|
|
</svg>
|
|
)}
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
);
|
|
|
|
Button.displayName = "Button";
|