Button

1import { Slot } from '@radix-ui/react-slot';
2import { cva, type VariantProps } from 'class-variance-authority';
3import { ComponentProps, ReactNode } from 'react';
4 
5import { Body1, Label1, Label2 } from '@/components/ui/typography';
6import { cn } from '@/lib/utils';
7 
8interface IButtonProps extends ComponentProps<'button'>, VariantProps<typeof BUTTON_VARIANTS> {
9  asChild?: boolean;
10  loading?: boolean;
11  prefixIcon?: ReactNode;
12  suffixIcon?: ReactNode;
13  contentContainerClassName?: string;
14  iconButton?: boolean;
15}
16 
17const BUTTON_VARIANTS = cva(
18  'inline-flex cursor-pointer items-center justify-center gap-2 rounded disabled:opacity-50 disabled:pointer-events-none transition-[color,background-color,border-color,box-shadow] duration-150 ease-in-out flex-nowrap focus:ring-0 focus:outline-0',
19  {
20    variants: {
21      theme: {
22        primary:
23          'text-primary [--btn-bg:var(--color-primary)] [--btn-bg-tonal:var(--color-primary-100)] [--btn-border-color:var(--color-primary)] [--btn-text-color:var(--color-primary)] focus:shadow-focus-primary',
24        success:
25          'text-success [--btn-bg:var(--color-success)] [--btn-bg-tonal:var(--color-success-100)] [--btn-border-color:var(--color-success-300)] [--btn-text-color:var(--color-success)] focus:shadow-focus-success',
26        destructive:
27          'text-danger [--btn-bg:var(--color-danger)] [--btn-bg-tonal:var(--color-danger-100)] [--btn-border-color:var(--color-danger-300)] [--btn-text-color:var(--color-danger)] focus:shadow-focus-danger',
28      },
29      variant: {
30        filled: 'bg-(--btn-bg) text-neutral-0 hover:shadow-xs active:opacity-90',
31        outlined:
32          'border border-(--btn-border-color) bg-transparent hover:bg-(--btn-bg)/8 active:bg-(--btn-bg)/16 text-(--btn-text-color)',
33        tonal: 'bg-(--btn-bg-tonal) text-neutral active:opacity-90 hover:shadow-xs',
34        text: 'bg-transparent hover:bg-(--btn-bg)/8 active:bg-(--btn-bg)/16 text-(--btn-text-color)',
35      },
36      size: {
37        sm: 'py-2 px-4 text-sm',
38        md: 'py-2.5 px-6 text-base',
39        lg: 'py-3 px-6 text-base',
40      },
41      iconButton: {
42        true: '',
43        false: '',
44      },
45    },
46    compoundVariants: [
47      { iconButton: false, className: '[&>svg]:size-4.5' },
48      // Regular button padding (when iconOnly is false)
49      {
50        iconButton: false,
51        size: 'sm',
52        className: 'py-2 px-4 has-[>svg:first-child]:pl-3 has-[>svg:last-child]:pr-3',
53      },
54      {
55// … truncated