button

1'use client';
2 
3import { Button as ButtonPrimitive } from '@base-ui/react/button';
4import { cva, type VariantProps } from 'class-variance-authority';
5 
6import { cn } from '@/registry/lib/utils';
7 
8const buttonVariants = cva(
9  "group/button inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-dynamic text-sm text-ui-label font-medium select-none bg-clip-padding disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 focus-visible:outline-2 focus-visible:outline-focus",
10  {
11    variants: {
12      variant: {
13        solid:
14          'bg-fill text-on-fill hover:bg-fill/90 active:bg-fill/80 focus-visible:outline-focus-fill focus-visible:outline-offset-2',
15        outline: 'border border-line-ui bg-transparent hover:bg-hover/30 active:bg-active/40',
16        surface: 'border border-line-ui bg-ui hover:border-line-ui hover:bg-hover active:bg-active',
17        soft: 'bg-ui hover:bg-hover active:bg-active',
18        ghost: 'hover:bg-hover active:bg-active',
19      },
20      size: {
21        sm: "h-8 rounded-dynamic gap-1.5 px-3 has-[>svg]:px-2.5 text-xs [&_svg:not([class*='size-'])]:size-3",
22        md: 'h-7.5 px-3 has-[>svg]:px-2.5',
23        lg: 'h-10 px-6 has-[>svg]:px-4',
24        icon: 'size-7.5',
25        'icon-sm': 'size-7',
26        'icon-lg': 'size-9',
27      },
28    },
29    defaultVariants: {
30      variant: 'solid',
31      size: 'md',
32    },
33  }
34);
35 
36type Theme = 'gray' | 'accent' | 'destructive' | (string & {});
37 
38interface ButtonProps extends ButtonPrimitive.Props, VariantProps<typeof buttonVariants> {
39  theme?: Theme;
40}
41 
42function Button({
43  className,
44  variant = 'solid',
45  theme = 'gray',
46  size = 'md',
47  ...props
48}: ButtonProps) {
49  return (
50    <ButtonPrimitive
51      data-slot="button"
52      data-variant={variant}
53      data-theme={theme !== 'gray' ? theme : undefined}
54      className={cn(buttonVariants({ variant, size, className }))}
55      {...props}
56    />
57  );
58}
59 
60export { Button, buttonVariants };