Experiments DB Dev
50 lines
1.4 KiB
React
50 lines
1.4 KiB
React
import React from 'react';
|
|
|
|
const variants = {
|
|
primary: 'bg-blue-600 hover:bg-blue-700 text-white border-transparent',
|
|
secondary: 'bg-white hover:bg-gray-50 text-gray-700 border-gray-300',
|
|
danger: 'bg-red-600 hover:bg-red-700 text-white border-transparent',
|
|
ghost: 'bg-transparent hover:bg-gray-100 text-gray-600 border-transparent',
|
|
};
|
|
|
|
const sizes = {
|
|
sm: 'px-3 py-1.5 text-sm',
|
|
md: 'px-4 py-2 text-sm',
|
|
lg: 'px-6 py-3 text-base',
|
|
};
|
|
|
|
export default function Button({
|
|
children,
|
|
variant = 'primary',
|
|
size = 'md',
|
|
disabled = false,
|
|
loading = false,
|
|
onClick,
|
|
type = 'button',
|
|
className = '',
|
|
...rest
|
|
}) {
|
|
return (
|
|
<button
|
|
type={type}
|
|
disabled={disabled || loading}
|
|
onClick={onClick}
|
|
className={`
|
|
inline-flex items-center gap-1.5 rounded-md border font-medium
|
|
transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
|
|
disabled:opacity-50 disabled:cursor-not-allowed
|
|
${variants[variant]} ${sizes[size]} ${className}
|
|
`}
|
|
{...rest}
|
|
>
|
|
{loading && (
|
|
<svg className="animate-spin h-4 w-4" 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-8v8z" />
|
|
</svg>
|
|
)}
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|