Apocalypse Button

1"use client";
2 
3import * as React from "react";
4import { cva, type VariantProps } from "class-variance-authority";
5 
6import { cn } from "@/registry/apocalypseui/lib/utils";
7import { Loader } from "@/registry/apocalypseui/button/loader";
8 
9const buttonVariants = cva(
10  "relative inline-flex items-center justify-center gap-2 border font-mono font-medium tracking-wide transition-colors disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap",
11  {
12    variants: {
13      variant: {
14        default:
15          "bg-black dark:bg-white text-white dark:text-black border-white dark:border-black",
16        secondary:
17          "bg-white/10 text-white dark:text-black border-white/20 dark:border-black/20 backdrop-blur",
18        outline:
19          "bg-transparent text-white dark:text-black border-white/30 dark:border-black/30",
20      },
21      size: {
22        sm: "px-3 py-1 text-[14px] rounded-md",
23        md: "px-4 py-2 text-[16px] rounded-lg",
24        lg: "px-4 py-3 text-[18px] rounded-lg",
25      },
26    },
27    defaultVariants: {
28      variant: "default",
29      size: "lg",
30    },
31  }
32);
33 
34export interface ButtonProps
35  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
36    VariantProps<typeof buttonVariants> {
37  isLoading?: boolean;
38  loaderSize?: "sm" | "md" | "lg";
39}
40 
41const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
42  (
43    {
44      className,
45      variant,
46      size,
47      isLoading = false,
48      loaderSize,
49      children,
50      ...props
51    },
52    ref
53  ) => {
54    return (
55      <button
56        ref={ref}
57        className={cn(buttonVariants({ variant, size }), className)}
58        disabled={isLoading || props.disabled}
59        {...props}
60      >
61        <span className={cn("flex items-center", isLoading && "invisible")}>
62          {children}
63        </span>
64        {isLoading && (
65          <span className="absolute inset-0 flex items-center justify-center">
66            <Loader size={loaderSize ?? size ?? "md"} />
67          </span>
68        )}
69      </button>
70    );
71  }
72);
73 
74Button.displayName = "Button";
75 
76export { Button, buttonVariants };