Button

1import { cva, type VariantProps } from "class-variance-authority";
2import clsx from "clsx";
3import type * as React from "react";
4import { twMerge } from "tailwind-merge";
5 
6const buttonVariants = cva(
7  "cursor-pointer inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors text-white dark:text-white/80",
8  {
9    variants: {
10      variant: {
11        default: "bg-blue-500 hover:bg-blue-500/90 gap-1",
12        link: "underline-offset-4 hover:underline",
13      },
14      size: {
15        default: "px-4 py-2",
16        icon: "p-2",
17      },
18    },
19    defaultVariants: {
20      variant: "default",
21      size: "default",
22    },
23  },
24);
25 
26function Button({
27  className,
28  variant,
29  size,
30  ...props
31}: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants>) {
32  return (
33    <button
34      data-slot="button"
35      className={twMerge(clsx(buttonVariants({ variant, size, className })))}
36      {...props}
37    />
38  );
39}
40 
41export { Button };