52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
|
|
import React from 'react';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { Ripple } from './Ripple';
|
|
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
|
|
size?: 'sm' | 'md' | 'lg' | 'icon';
|
|
fullWidth?: boolean;
|
|
loading?: boolean;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
({ className = '', variant = 'primary', size = 'md', fullWidth = false, loading = false, children, disabled, ...props }, ref) => {
|
|
|
|
const baseStyles = "inline-flex items-center justify-center rounded-full font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50";
|
|
|
|
const variants = {
|
|
primary: "bg-primary text-on-primary hover:bg-primary/90",
|
|
secondary: "bg-secondary-container text-on-secondary-container hover:bg-secondary-container/80",
|
|
outline: "border border-outline text-primary hover:bg-primary-container/10",
|
|
ghost: "text-on-surface hover:bg-surface-container-high",
|
|
destructive: "bg-error text-on-error hover:bg-error/90",
|
|
};
|
|
|
|
const sizes = {
|
|
sm: "h-8 px-3 text-xs",
|
|
md: "h-10 px-4 text-sm",
|
|
lg: "h-12 px-8 text-base",
|
|
icon: "h-10 w-10",
|
|
};
|
|
|
|
const width = fullWidth ? "w-full" : "";
|
|
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${width} ${className} relative overflow-hidden`}
|
|
disabled={disabled || loading}
|
|
{...props}
|
|
>
|
|
<Ripple color={variant === 'primary' ? 'rgba(255,255,255,0.3)' : 'rgba(0,0,0,0.2)'} />
|
|
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
);
|
|
|
|
Button.displayName = "Button";
|