Button

1import { Slot } from '@radix-ui/react-slot';
2import { cva, type VariantProps } from 'class-variance-authority';
3import { cn } from '@/lib/classnames';
4import type { ComponentProps } from 'react';
5 
6const buttonVariants = cva(
7  'disabled:fg-disabled inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm transition-colors focus-visible:border-base focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-disabled disabled:shadow-buttons-neutral disabled:after:hidden [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
8  {
9    variants: {
10      variant: {
11        primary: cn(
12          'after:button-inverted-gradient bg-button-inverted text-contrast-fg-primary shadow-buttons-inverted',
13          'hover:after:button-inverted-hover-gradient hover:bg-button-inverted-hover',
14          'active:after:button-inverted-pressed-gradient active:bg-button-inverted-pressed',
15          'focus-visible:!shadow-buttons-inverted-focus',
16        ),
17        secondary: cn(
18          'after:button-neutral-gradient bg-button-neutral text-fg-base shadow-buttons-neutral',
19          'hover:after:button-neutral-hover-gradient hover:bg-button-neutral-hover',
20          'active:after:button-neutral-pressed-gradient active:bg-button-neutral-pressed',
21          'focus-visible:shadow-buttons-neutral-focus',
22        ),
23        destructive: cn(
24          'after:button-danger-gradient bg-button-danger text-fg-on-color shadow-buttons-colored shadow-buttons-danger',
25          'hover:after:button-danger-hover-gradient hover:bg-button-danger-hover',
26          'active:after:button-danger-pressed-gradient active:bg-button-danger-pressed',
27          'focus-visible:shadow-buttons-danger-focus',
28        ),
29        outline:
30          'border border-gray-200 bg-white shadow-sm hover:bg-gray-100 hover:text-gray-900',
31        ghost: 'hover:bg-gray-100 hover:text-gray-900',
32      },
33      size: {
34        sm: 'h-8 rounded-md px-3 text-xs',
35        md: 'h-9 px-4 py-2',
36        lg: 'h-10 rounded-md px-8',
37        icon: 'h-9 w-9',
38      },
39    },
40    defaultVariants: {
41      variant: 'primary',
42      size: 'md',
43    },
44  },
45);
46 
47type ButtonProps = ComponentProps<'button'> &
48  VariantProps<typeof buttonVariants> & {
49    asChild?: boolean;
50  };
51 
52const Button = ({
53  className,
54  variant,
55  size,
56  asChild = false,
57  ...props
58}: ButtonProps) => {
59  const Comp = asChild ? Slot : 'button';
60 
61  return (
62    <Comp
63// … truncated