32 lines
1.4 KiB
TypeScript
32 lines
1.4 KiB
TypeScript
import { cva, type VariantProps } from "class-variance-authority";
|
|
import { clsx } from "clsx";
|
|
import { ComponentPropsWithoutRef, forwardRef } from "react";
|
|
|
|
const buttonVariants = cva(
|
|
"inline-flex items-center justify-center gap-2 font-semibold transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-var(--color-primary)",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
primary: "bg-[var(--color-primary)] text-[var(--color-on-primary)] hover:opacity-90",
|
|
secondary: "bg-[var(--color-panel)] text-[var(--color-foreground)] hover:bg-[color:var(--color-panel)/0.9] border border-[var(--color-border)]",
|
|
ghost: "bg-transparent text-[var(--color-foreground)] hover:bg-[color:var(--color-border)/0.12]"
|
|
},
|
|
size: {
|
|
sm: "h-9 rounded-[var(--radius-sm)] px-3 text-sm",
|
|
md: "h-11 rounded-[var(--radius-md)] px-4 text-base",
|
|
lg: "h-12 rounded-[var(--radius-lg)] px-6 text-base"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
variant: "primary",
|
|
size: "md"
|
|
}
|
|
}
|
|
);
|
|
|
|
export interface ButtonProps extends ComponentPropsWithoutRef<"button">, VariantProps<typeof buttonVariants> {}
|
|
|
|
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({ className, variant, size, ...props }, ref) {
|
|
return <button ref={ref} className={clsx(buttonVariants({ variant, size }), className)} {...props} />;
|
|
});
|