File size: 1,338 Bytes
212c959 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | import { forwardRef } from 'react'
import clsx from 'clsx'
const variants = {
primary:
'border border-transparent bg-accent text-accent-foreground hover:bg-accent/90 active:scale-[0.99]',
secondary:
'border border-border bg-card text-foreground hover:bg-secondary',
ghost:
'border border-transparent bg-transparent text-muted-foreground hover:bg-secondary/75 hover:text-foreground',
danger: 'border border-danger/25 bg-danger/10 text-danger hover:bg-danger/20',
}
const sizes = {
sm: 'h-9 px-3 text-sm',
md: 'h-11 px-4 text-sm',
lg: 'h-12 px-5 text-sm',
icon: 'h-11 w-11',
}
const Button = forwardRef(function Button(
{
className,
variant = 'secondary',
size = 'md',
children,
loading = false,
disabled,
...props
},
ref,
) {
return (
<button
ref={ref}
className={clsx(
'inline-flex items-center justify-center gap-2 rounded-lg font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/35 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
variants[variant],
sizes[size],
className,
)}
disabled={disabled || loading}
{...props}
>
{children}
</button>
)
})
export default Button
|