46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/cn';
|
|
|
|
type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
type Size = 'sm' | 'md' | 'lg';
|
|
|
|
const variants: Record<Variant, string> = {
|
|
primary:
|
|
'bg-[--color-accent] text-[--color-accent-fg] hover:bg-[#5557e8] active:bg-[#4f51d8] border border-transparent',
|
|
secondary:
|
|
'bg-[--color-bg-elevated] text-[--color-fg] hover:bg-[--color-bg-subtle] border border-[--color-border]',
|
|
ghost:
|
|
'bg-transparent text-[--color-fg-muted] hover:text-[--color-fg] hover:bg-[--color-bg-subtle] border border-transparent',
|
|
danger:
|
|
'bg-transparent text-[--color-danger] hover:bg-[rgba(239,68,68,0.08)] border border-[--color-border]',
|
|
};
|
|
|
|
const sizes: Record<Size, string> = {
|
|
sm: 'h-7 px-2.5 text-xs gap-1.5',
|
|
md: 'h-8 px-3 text-[13px] gap-2',
|
|
lg: 'h-10 px-4 text-sm gap-2',
|
|
};
|
|
|
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: Variant;
|
|
size?: Size;
|
|
}
|
|
|
|
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
|
|
{ className, variant = 'secondary', size = 'md', ...props },
|
|
ref,
|
|
) {
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
className={cn(
|
|
'inline-flex items-center justify-center rounded-md font-medium tracking-tight transition-colors duration-200 ease-out disabled:opacity-50 disabled:pointer-events-none select-none',
|
|
variants[variant],
|
|
sizes[size],
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
});
|