Halves component source
components/halves/Button.tsx
import Link from "next/link";
import type { ButtonHTMLAttributes, ReactNode } from "react";
type ButtonProps = {
children: ReactNode;
href?: string;
variant?: "primary" | "outline" | "text";
} & ButtonHTMLAttributes<HTMLButtonElement>;
export function Button({
children,
href,
variant = "primary",
className = "",
...props
}: ButtonProps) {
const classes = `button button--${variant} ${className}`.trim();
if (href) {
return (
<Link className={classes} href={href}>
{children}
</Link>
);
}
return (
<button className={classes} {...props}>
{children}
</button>
);
}