button

1import { cn } from "@/lib/utils"
2import { Slot } from "@radix-ui/react-slot"
3import { cva, type VariantProps } from "class-variance-authority"
4import * as React from "react"
5 
6const buttonVariants = cva(
7  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
8  {
9    variants: {
10      variant: {
11        default:
12          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
13        destructive:
14          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
15        outline:
16          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
17        secondary:
18          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
19        ghost: "hover:bg-accent hover:text-accent-foreground",
20        link: "text-primary underline-offset-4 hover:underline",
21      },
22      size: {
23        default: "h-9 px-4 py-2 has-[>svg]:px-3",
24        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
25        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
26        icon: "size-9",
27      },
28    },
29    defaultVariants: {
30      variant: "default",
31      size: "default",
32    },
33  },
34)
35 
36function Button({
37  className,
38  variant,
39  size,
40  asChild = false,
41  ...props
42}: React.ComponentProps<"button"> &
43  VariantProps<typeof buttonVariants> & {
44    asChild?: boolean
45  }) {
46  const Comp = asChild ? Slot : "button"
47 
48  return (
49    <Comp
50      data-slot="button"
51      className={cn(buttonVariants({ variant, size, className }))}
52      {...props}
53    />
54  )
55}
56 
57export { Button, buttonVariants }