38 lines
973 B
TypeScript
38 lines
973 B
TypeScript
import type { ButtonHTMLAttributes, ReactNode } from "react";
|
|
|
|
type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
|
|
type ButtonSize = "sm" | "lg";
|
|
|
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
children: ReactNode;
|
|
variant?: ButtonVariant;
|
|
size?: ButtonSize;
|
|
className?: string; // Explicitly allow className
|
|
}
|
|
|
|
export function Button({
|
|
children,
|
|
variant = "primary",
|
|
size,
|
|
className = "",
|
|
...props
|
|
}: ButtonProps) {
|
|
// Construct class names based on stylesheet.css
|
|
const variantClass = variant === "primary" ? "btn-primary" :
|
|
variant === "secondary" ? "btn-secondary" :
|
|
variant === "outline" ? "btn-outline" :
|
|
variant === "ghost" ? "btn-ghost" : "";
|
|
|
|
const sizeClass = size === "sm" ? "btn-sm" :
|
|
size === "lg" ? "btn-lg" : "";
|
|
|
|
return (
|
|
<button
|
|
className={`btn ${variantClass} ${sizeClass} ${className}`.trim()}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|