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

73.68% Statements 42/57
33.33% Branches 1/3
0% Functions 0/1
73.68% Lines 42/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
    581x
    1x
    1x
    1x

    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    224x
    1x
    1x
    1x
    1x
     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 }