Button

1import { type VariantProps, cva } from "class-variance-authority";
2import type { Component, JSX } from "solid-js";
3import { splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5 
6export const buttonVariants = cva(
7  [
8    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium",
9    "ring-offset-background transition-colors",
10    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
11    "disabled:pointer-events-none disabled:opacity-50",
12    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
13  ],
14  {
15    variants: {
16      variant: {
17        default: "bg-primary text-primary-foreground hover:bg-primary/90",
18        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
19        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
20        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
21        ghost: "hover:bg-accent hover:text-accent-foreground",
22        link: "text-primary underline-offset-4 hover:underline",
23      },
24      size: {
25        default: "h-10 px-4 py-2",
26        sm: "h-9 rounded-md px-3",
27        lg: "h-11 rounded-md px-8",
28        icon: "h-10 w-10",
29      },
30    },
31    defaultVariants: {
32      variant: "default",
33      size: "default",
34    },
35  },
36);
37 
38export type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> &
39  VariantProps<typeof buttonVariants> & {
40    asChild?: boolean;
41  };
42 
43export const Button: Component<ButtonProps> = (props) => {
44  const [local, variants, rest] = splitProps(props, ["class"], ["variant", "size"]);
45 
46  return <button class={cn(buttonVariants(variants), local.class)} {...rest} />;
47};