Button

1import { Button as ButtonPrimitive } from "@base-ui/react/button"
2import { cva, type VariantProps } from "class-variance-authority"
3import { cn } from "@/lib/utils"
4 
5const buttonVariants = cva(
6  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-transform focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none active:scale-98 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
7  {
8    variants: {
9      variant: {
10        default:
11          "border-[0.5px] border-white/10 bg-primary text-primary-foreground shadow-md ring shadow-black/15 ring-ring text-shadow-sm hover:bg-primary/90 focus-visible:ring-foreground dark:border-transparent [&_svg]:drop-shadow-sm",
12        destructive:
13          "text-destructive-foreground border-[0.5px] border-white/10 bg-destructive shadow-md ring-1 shadow-black/25 ring-(--ring-color) [--ring-color:color-mix(in_oklab,black_15%,var(--color-destructive))] text-shadow-sm hover:bg-destructive/90 [&_svg]:drop-shadow-sm",
14        outline:
15          "border border-transparent bg-card shadow-sm ring-1 shadow-black/10 ring-foreground/10 duration-200 hover:bg-muted/50 dark:ring-foreground/15 dark:hover:bg-muted/50",
16        secondary:
17          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
18        ghost: "hover:bg-foreground/5 hover:text-foreground",
19        link: "text-primary underline-offset-4 hover:underline",
20      },
21      size: {
22        default: "h-9 px-4 py-2",
23        sm: "h-8 rounded-md px-3 text-xs",
24        lg: "h-10 rounded-md px-8",
25        icon: "size-9",
26        "icon-xs":
27          "size-7 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
28        "icon-sm":
29          "size-8 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
30        "icon-lg": "size-10",
31      },
32    },
33    defaultVariants: {
34      variant: "default",
35      size: "default",
36    },
37  }
38)
39 
40function Button({
41  className,
42  variant = "default",
43  size = "default",
44  ...props
45}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
46  return (
47    <ButtonPrimitive
48      data-slot="button"
49      className={cn(buttonVariants({ variant, size, className }))}
50      {...props}
51    />
52  )
53}
54 
55export { Button, buttonVariants }