MicroClub Button

1'use client';
2 
3import * as React from 'react';
4import { Button as ButtonPrimitive } from '@base-ui/react/button';
5import { cva, type VariantProps } from 'class-variance-authority';
6import { LinkIcon, Loader2 } from 'lucide-react';
7 
8import { cn } from '@/lib/utils';
9 
10const buttonVariants = cva(
11  'group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
12  {
13    variants: {
14      variant: {
15        primary:
16          'bg-primary text-primary-foreground hover:bg-secondary-foreground hover:text-secondary active:bg-secondary-foreground active:text-secondary active:ring-4 active:ring-secondary disabled:bg-muted disabled:text-muted-foreground',
17        secondary:
18          'bg-secondary text-secondary-foreground hover:bg-accent hover:text-accent-foreground active:bg-accent active:text-accent-foreground active:ring-4 active:ring-secondary disabled:bg-muted disabled:text-muted-foreground',
19        tertiary:
20          'bg-primary-foreground text-primary hover:text-accent-foreground active:text-accent-foreground active:ring-4 active:ring-secondary disabled:bg-muted disabled:text-muted-foreground',
21        link: 'bg-transparent p-0 text-foreground underline hover:text-accent-foreground active:text-accent-foreground disabled:text-muted-foreground',
22      },
23      size: {
24        sm: 'px-3.5 py-2 text-sm font-medium',
25        md: 'px-4 py-2.5 text-sm font-medium',
26        lg: 'px-[1.125rem] py-2.5 text-base font-medium',
27        xl: 'px-5 py-3 text-base font-medium',
28      },
29      icon: {
30        none: '',
31        leading: 'gap-2',
32        trailing: 'gap-2',
33        dot: 'gap-2',
34        only: '',
35      },
36      destructive: {
37        true: '',
38        false: '',
39      },
40    },
41    compoundVariants: [
42      {
43        variant: 'link',
44        className: 'px-0 py-0',
45      },
46      {
47        icon: 'only',
48        size: 'sm',
49        className: 'p-2',
50      },
51      {
52        icon: 'only',
53        size: 'md',
54        className: 'p-2.5',
55      },
56      {
57        icon: 'only',
58        size: 'lg',
59        className: 'p-3',
60      },
61      {
62        icon: 'only',
63        size: 'xl',
64        className: 'p-3.5',
65      },
66      // Destructive overrides
67      {
68        destructive: true,
69        variant: 'primary',
70        className:
71// … truncated