Button

1import { Button as ButtonPrimitive } from "@base-ui/react/button"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn, focusRingClasses } from "@/registry/lib/surface"
5 
6const buttonVariants = cva(
7  cn(
8    "group/button inline-flex shrink-0 items-center justify-center rounded-md border font-mono text-xs font-medium whitespace-nowrap outline-none select-none transition-opacity duration-[var(--d-drift)] ease-[var(--ease-drift)] hover:opacity-60 active:opacity-40 active:duration-[var(--d-snap)] active:ease-[var(--ease-snap)] disabled:pointer-events-none disabled:opacity-40 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
9    focusRingClasses,
10  ),
11  {
12    variants: {
13      variant: {
14        default: "border-transparent bg-primary text-primary-foreground",
15        outline: "border-border bg-background text-foreground",
16        secondary: "border-border-strong bg-transparent text-foreground",
17        ghost:
18          "border-transparent bg-transparent text-foreground hover:bg-secondary hover:opacity-100 active:opacity-100 aria-expanded:bg-secondary",
19        destructive:
20          "border-destructive bg-transparent text-destructive hover:opacity-60",
21        link: "border-transparent bg-transparent text-foreground underline-offset-4 hover:opacity-60",
22      },
23      size: {
24        default:
25          "h-8 gap-2 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
26        xs: "h-6 gap-1 px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
27        sm: "h-7 gap-1.5 px-2.5 text-[0.8125rem] has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5",
28        lg: "h-9 gap-2 px-4 text-sm has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
29        icon: "size-8",
30        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
31        "icon-sm": "size-7",
32        "icon-lg": "size-9",
33      },
34    },
35    defaultVariants: {
36      variant: "default",
37      size: "default",
38    },
39  }
40)
41 
42function Button({
43  className,
44  variant = "default",
45  size = "default",
46  ...props
47}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
48  return (
49    <ButtonPrimitive
50      data-slot="button"
51      data-variant={variant}
52      data-size={size}
53      className={cn(buttonVariants({ variant, size, className }))}
54      {...props}
55// … truncated