37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import { cn } from './utils';
|
|
import type { VariantProps } from 'class-variance-authority';
|
|
import { cva } from 'class-variance-authority';
|
|
import type { ButtonHTMLAttributes } from 'react';
|
|
import { forwardRef } from 'react';
|
|
|
|
const variants = cva(
|
|
'rounded-sm h-10 px-5 py-2.5 text-sm font-semibold text-white transition-all ease-in-out',
|
|
{
|
|
defaultVariants: {
|
|
intent: 'default',
|
|
},
|
|
variants: {
|
|
intent: {
|
|
danger: 'bg-danger hover:bg-danger-700',
|
|
default: 'bg-primary hover:bg-primary-600',
|
|
'outline-danger':
|
|
'bg-transparent text-danger border border-danger hover:bg-danger hover:text-white',
|
|
'outline-default':
|
|
'bg-transparent text-primary border border-primary hover:bg-primary hover:text-white',
|
|
'outline-secondary':
|
|
'border border-primary text-primary-500 hover:bg-primary-500 hover:text-white',
|
|
secondary:
|
|
'bg-primary-50 text-primary-500 border border-transparent hover:bg-primary-100 hover:text-primary-600',
|
|
},
|
|
},
|
|
}
|
|
);
|
|
|
|
export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof variants>;
|
|
|
|
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
({ className, intent, ...props }, ref) => (
|
|
<button type="button" className={cn(variants({ className, intent }))} ref={ref} {...props} />
|
|
)
|
|
);
|