Button.tsx
1 import { ButtonHTMLAttributes, FC } from "react"; 2 import { cva, type VariantProps } from "cva"; 3 4 const button = cva("button", { 5 variants: { 6 intent: { 7 accept: ["bg-AccpetButtonColor", "text-white"], 8 deny: ["bg-DenyButtonColor", "text-white"], 9 success: ["bg-BorderSuccessColor", "text-white"], 10 noBG: ["bg-transparent", "text-AccpetButtonColor"], 11 }, 12 size: { 13 icon: ["p-2", "rounded-md"], 14 small: ["text-md", "py-1", "px-2", "rounded-md"], 15 medium: ["text-lg", "py-2", "px-4", "rounded-lg", "font-semibold"], 16 large: ["text-xl", "py-3", "px-5", "rounded-lg", "font-semibold"], 17 }, 18 border: { 19 none: ["border-0"], 20 underline: ["border-0", "border-b", "!px-0", "!rounded-none", "!py-0"], 21 }, 22 }, 23 compoundVariants: [ 24 { 25 intent: "noBG", 26 border: "underline", 27 class: "", 28 }, 29 ], 30 defaultVariants: { 31 intent: "accept", 32 size: "medium", 33 border: "none", 34 }, 35 }); 36 37 export interface ButtonProps 38 extends ButtonHTMLAttributes<HTMLButtonElement>, 39 VariantProps<typeof button> {} 40 41 export const CustomButton: FC<ButtonProps> = ({ 42 className, 43 intent, 44 size, 45 border, 46 ...props 47 }) => ( 48 <button className={button({ intent, size, border, className })} {...props} /> 49 );