button

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