# All files / src/components/ui button.tsx

0% Statements 0/57
0% Branches 0/1
0% Functions 0/1
0% Lines 0/57

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58

     import { ComponentProps, forwardRef } from "react"
    import { cn } from "@/lib/utils"

    const buttonVariants = (props?: { variant?: string; size?: string }) => {
      const variant = props?.variant || "filled"
      const variantClass = {
        filled: "mat-mdc-unelevated-button",
        outlined: "mat-mdc-outlined-button",
        outline: "mat-mdc-outlined-button",
        text: "mat-mdc-button",
        elevated: "mat-mdc-raised-button",
        tonal: "mat-tonal-button",
        secondary: "mat-mdc-button",
        destructive: "mat-mdc-unelevated-button",
        ghost: "mat-mdc-button",
        link: "mat-mdc-button",
      }[variant] || "mat-mdc-button"
      return variantClass
    }

    interface ButtonProps extends ComponentProps<"button"> {
      variant?: "filled" | "outlined" | "outline" | "text" | "elevated" | "tonal" | "secondary" | "destructive" | "ghost" | "link"
      size?: "default" | "sm" | "lg" | "icon"
      asChild?: boolean
    }

    export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
      ({ className, variant = "filled", children, asChild, ...props }, ref) => {
        const Comp = asChild ? "span" : "button"

        const variantClass = {
          filled: "mat-mdc-unelevated-button",
          outlined: "mat-mdc-outlined-button",
          outline: "mat-mdc-outlined-button",
          text: "mat-mdc-button",
          elevated: "mat-mdc-raised-button",
          tonal: "mat-tonal-button",
          secondary: "mat-mdc-button",
          destructive: "mat-mdc-unelevated-button",
          ghost: "mat-mdc-button",
          link: "mat-mdc-button",
        }[variant]

        return (
          <Comp
            ref={asChild ? undefined : ref}
            className={cn(variantClass, className)}
            {...props}
          >
            {children}
          </Comp>
        )
      }
    )
    Button.displayName = "Button"

    export { buttonVariants }