67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
import type { ButtonProps } from "$/types/ButtonTypes";
|
|
import clsx from "clsx";
|
|
import { forwardRef } from "react";
|
|
|
|
|
|
|
|
const Button = forwardRef<HTMLButtonElement, ButtonProps>((
|
|
{
|
|
className,
|
|
type="button",
|
|
rounding = "lg",
|
|
shape = "rectangle",
|
|
size = "md",
|
|
variant = "standard",
|
|
disabled,
|
|
...buttonProps
|
|
}, ref ) => {
|
|
return (
|
|
<button
|
|
data-testid="mattrixwv-button"
|
|
ref={ref}
|
|
type={type}
|
|
{...buttonProps}
|
|
disabled={disabled}
|
|
className={clsx(
|
|
className,
|
|
//Focus
|
|
"focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
|
|
//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,
|
|
"cursor-not-allowed opacity-75": disabled
|
|
}
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
|
|
export default Button;
|