1- import * as React from " react"
2- import { Slot } from "@radix-ui/react-slot"
3- import { cva , type VariantProps } from "class-variance-authority"
1+ import { Slot } from '@radix-ui/ react-slot'
2+ import { cva , type VariantProps } from 'class-variance-authority'
3+ import * as React from 'react'
44
5- import { cn } from " @/lib/utils"
5+ import { cn } from ' @/lib/utils'
66
77const buttonVariants = cva (
8- " inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0" ,
8+ ' inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0' ,
99 {
10+ defaultVariants : {
11+ size : 'default' ,
12+ variant : 'default' ,
13+ } ,
1014 variants : {
11- variant : {
12- default : "bg-primary text-primary-foreground hover:bg-primary/90" ,
13- destructive :
14- "bg-destructive text-destructive-foreground hover:bg-destructive/90" ,
15- outline :
16- "border border-input bg-background hover:bg-accent hover:text-accent-foreground" ,
17- secondary :
18- "bg-secondary text-secondary-foreground hover:bg-secondary/80" ,
19- ghost : "hover:bg-accent hover:text-accent-foreground" ,
20- link : "text-primary underline-offset-4 hover:underline" ,
21- } ,
2215 size : {
23- default : "h-10 px-4 py-2" ,
24- sm : "h-9 rounded-md px-3" ,
25- lg : "h-11 rounded-md px-8" ,
26- icon : "h-10 w-10" ,
16+ default : 'h-10 px-4 py-2' ,
17+ icon : 'h-10 w-10' ,
18+ lg : 'h-11 rounded-md px-8' ,
19+ sm : 'h-9 rounded-md px-3' ,
20+ } ,
21+ variant : {
22+ default : 'bg-primary text-primary-foreground hover:bg-primary/90' ,
23+ destructive : 'bg-destructive text-destructive-foreground hover:bg-destructive/90' ,
24+ ghost : 'hover:bg-accent hover:text-accent-foreground' ,
25+ link : 'text-primary underline-offset-4 hover:underline' ,
26+ outline : 'border border-input bg-background hover:bg-accent hover:text-accent-foreground' ,
27+ secondary : 'bg-secondary text-secondary-foreground hover:bg-secondary/80' ,
2728 } ,
2829 } ,
29- defaultVariants : {
30- variant : "default" ,
31- size : "default" ,
32- } ,
33- }
30+ } ,
3431)
3532
3633export interface ButtonProps
@@ -41,16 +38,12 @@ export interface ButtonProps
4138
4239const Button = React . forwardRef < HTMLButtonElement , ButtonProps > (
4340 ( { className, variant, size, asChild = false , ...props } , ref ) => {
44- const Comp = asChild ? Slot : " button"
41+ const Comp = asChild ? Slot : ' button'
4542 return (
46- < Comp
47- className = { cn ( buttonVariants ( { variant, size, className } ) ) }
48- ref = { ref }
49- { ...props }
50- />
43+ < Comp className = { cn ( buttonVariants ( { className, size, variant } ) ) } ref = { ref } { ...props } />
5144 )
52- }
45+ } ,
5346)
54- Button . displayName = " Button"
47+ Button . displayName = ' Button'
5548
5649export { Button , buttonVariants }
0 commit comments