MattrixwvReactComponents/lib/component/button/Button.tsx

import type { ButtonProps } from "$/types/ButtonTypes";
import clsx from "clsx";


export default function Button(props: ButtonProps){
	const {
		className,
		rounding = "lg",
		shape = "rectangle",
		size = "md",
		variant = "standard",
		disabled,
		...buttonProps
	} = props;


	return (
		<button
			data-testid="mattrixwv-button"
			{...buttonProps}
			disabled={disabled}
			className={clsx(
				className,
				//Rounding
				{
					"rounded-sm": rounding === "sm",
					"rounded-md": rounding === "md",
					"rounded-lg": rounding === "lg",
					"rounded-full": rounding === "full"
				},
				//Size and shape
				{
					"p-0": size === "xs" && shape === "square",
					"p-1": size === "sm" && shape === "square",
					"p-2": size === "md" && shape === "square",
					"p-3": size === "lg" && shape === "square",
					"p-4": size === "xl" && shape === "square",

					"px-1 py-0": size === "xs" && shape === "rectangle",
					"px-2 py-1": size === "sm" && shape === "rectangle",
					"px-4 py-2": size === "md" && shape === "rectangle",
					"px-6 py-3": size === "lg" && shape === "rectangle",
					"px-8 py-4": size === "xl" && shape === "rectangle",
				},
				//Variant
				{
					"border": variant === "standard" || variant === "outline" || variant === "outline-ghost",
					"border-none": variant === "ghost" || variant === "icon"
				},
				//Disabled
				{
					"cursor-pointer": !disabled
				}
			)}
		/>
	);
}