Function Button

apps/baseai.dev/src/components/Button.tsx:37–82

({
	variant = 'primary',
	className,
	children,
	arrow,
	...props
}: ButtonProps)

);

export function Button({
	variant = 'primary',
	className,
	children,
	arrow,
	...props
}: ButtonProps) {
	className = clsx(
		'inline-flex gap-0.5 justify-center overflow-hidden text-base font-medium transition',
		variantStyles[variant],
		className
	);

	let arrowIcon = (
		<ArrowIcon
			className={clsx(
				'mt-0.5 h-5 w-5',
				variant === 'text' && 'relative top-px',
				arrow === 'left' && '-ml-1 rotate-180',
				arrow === 'right' && '-mr-1'
			)}
		/>
	);

	let inner = (
		<>
			{arrow === 'left' && arrowIcon}
			{children}
			{arrow === 'right' && arrowIcon}
		</>
	);

	if (typeof props.href === 'undefined') {
		return (
			<button className={className} {...props}>
				{inner}
			</button>
		);
	}

	return (
		<Link className={className} {...props}>
			{inner}
		</Link>
	);
}