Button

Preview

Code

import { ReactNode } from "react"

const Button = ({ children, variant, className }: { children: ReactNode; variant: "solid" | "outlined" | "clear" | "default"; className?: string }) => {
	const baseClassName =
		"inline-flex rounded-md px-4 py-2 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 transition-colors"
	const variantClassName = {
		default: "",
		clear: "hover:bg-gray-50",
		outlined: "font-semibold text-gray-900 border border-gray-200 hover:bg-gray-50",
		solid: "font-semibold text-white bg-gray-900 hover:bg-gray-700",
	}

	const componentClassName = [baseClassName, variantClassName[variant], className].join(" ")

	return (
		<button role="button" type="button" className={componentClassName}>
			{children}
		</button>
	)
}

export default Button