/ src / frontend / components / Button.tsx
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  );