81 lines
1.8 KiB
TypeScript
81 lines
1.8 KiB
TypeScript
|
|
|
|
import type { ButtonProps } from "$/types/ButtonTypes";
|
|
import clsx from "clsx";
|
|
import * as React from "react";
|
|
|
|
|
|
|
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
(
|
|
{
|
|
className,
|
|
rounding = "lg",
|
|
shape = "rectangle",
|
|
size = "md",
|
|
variant = "standard",
|
|
disabled,
|
|
ariaLabel,
|
|
ariaDescribedBy,
|
|
ariaControls,
|
|
role,
|
|
tabIndex,
|
|
children,
|
|
onClick,
|
|
...buttonProps
|
|
},
|
|
ref
|
|
) => {
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
data-testid="mattrixwv-button"
|
|
{...buttonProps}
|
|
disabled={disabled}
|
|
aria-label={ariaLabel}
|
|
aria-describedby={ariaDescribedBy}
|
|
aria-controls={ariaControls}
|
|
role={role}
|
|
tabIndex={tabIndex}
|
|
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
|
|
}
|
|
)}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
);
|
|
|
|
export default Button;
|