Button
Button component for user interaction
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