ec4ee78fcb
- 네이티브 element props 상속 + className 병합(무의존 cn 헬퍼) - Button: variant(primary/secondary/outline/ghost/destructive)/size, hover 톤다운(brand-700) - React 19 기준 forwardRef 없이 ref 전달 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
import { type ComponentProps } from 'react'
|
|
import { cn } from './cn'
|
|
|
|
export type ButtonVariant =
|
|
| 'primary'
|
|
| 'secondary'
|
|
| 'outline'
|
|
| 'ghost'
|
|
| 'destructive'
|
|
export type ButtonSize = 'sm' | 'md' | 'lg'
|
|
|
|
const base =
|
|
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium ' +
|
|
'transition-colors cursor-pointer select-none ' +
|
|
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' +
|
|
'disabled:pointer-events-none disabled:opacity-50'
|
|
|
|
// hover 는 한 단계 톤다운(brand-700) — 디자인 선호
|
|
const variantClass: Record<ButtonVariant, string> = {
|
|
primary: 'bg-primary text-primary-foreground hover:bg-brand-700',
|
|
secondary: 'bg-secondary text-secondary-foreground hover:bg-accent',
|
|
outline:
|
|
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
|
|
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
|
destructive: 'bg-destructive text-white hover:opacity-90',
|
|
}
|
|
|
|
const sizeClass: Record<ButtonSize, string> = {
|
|
sm: 'h-8 px-3 text-sm',
|
|
md: 'h-10 px-4 text-sm',
|
|
lg: 'h-11 px-6 text-base',
|
|
}
|
|
|
|
export interface ButtonProps extends ComponentProps<'button'> {
|
|
variant?: ButtonVariant
|
|
size?: ButtonSize
|
|
}
|
|
|
|
export function Button({
|
|
variant = 'primary',
|
|
size = 'md',
|
|
type = 'button',
|
|
className,
|
|
...props
|
|
}: ButtonProps) {
|
|
return (
|
|
<button
|
|
type={type}
|
|
className={cn(base, variantClass[variant], sizeClass[size], className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|