Button

1import * as React from "react"
2import { Slot } from "@radix-ui/react-slot"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6 
7// Delego button — ports the design-system primary/secondary/ghost set, plus the
8// protocol-semantic allow/deny actions used in the approval flow. The primary
9// carries the indigo glow; allow/deny map to the decision palette.
10const buttonVariants = cva(
11  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[--radius] text-sm font-medium tracking-[-0.01em] transition-all duration-200 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4 [&_svg]:shrink-0",
12  {
13    variants: {
14      variant: {
15        default:
16          "bg-primary text-primary-foreground shadow-lg shadow-primary/30 hover:bg-primary/90 active:scale-[0.98]",
17        secondary:
18          "bg-card text-foreground border border-border hover:bg-accent hover:border-border/80",
19        ghost: "bg-transparent text-muted-foreground hover:bg-card hover:text-foreground",
20        outline:
21          "border border-border bg-transparent text-foreground hover:bg-accent",
22        allow:
23          "bg-[var(--delego-allow)] text-[oklch(0.15_0.02_265)] font-semibold hover:brightness-110 active:scale-[0.98]",
24        deny: "bg-[var(--delego-deny)] text-white font-semibold hover:brightness-110 active:scale-[0.98]",
25        link: "text-primary underline-offset-4 hover:underline",
26      },
27      size: {
28        default: "h-10 px-[18px] py-[11px]",
29        sm: "h-9 px-3.5 text-[13px]",
30        lg: "h-11 px-6",
31        icon: "size-10",
32      },
33    },
34    defaultVariants: {
35      variant: "default",
36      size: "default",
37    },
38  }
39)
40 
41function Button({
42  className,
43  variant,
44  size,
45  asChild = false,
46  ...props
47}: React.ComponentProps<"button"> &
48  VariantProps<typeof buttonVariants> & {
49    asChild?: boolean
50  }) {
51  const Comp = asChild ? Slot : "button"
52  return (
53    <Comp
54      data-slot="button"
55      className={cn(buttonVariants({ variant, size, className }))}
56      {...props}
57    />
58  )
59}
60 
61export { Button, buttonVariants }