You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

56 lines
1.2 KiB

import React from "react";
import arrow from "../../assets/icons/white-left-arrow.svg";
const ButtonNewDesign = ({
bgColor,
bgHoverColor,
iconBgColor,
textColor,
border,
borderColor,
borderRadius,
fontSize,
paddingX,
paddingY,
icon,
buttonIcon,
text,
onClick,
iconMarginRight,
}) => {
return (
<button
onClick={onClick}
className={`w-fit h-fit flex items-center transiton duration-200 hover:bg-opacity-70 ${bgColor} ${bgHoverColor} ${textColor} ${border} ${borderColor} ${borderRadius} ${fontSize}
${paddingY} ${paddingX}`}
>
{text}
{icon && (
<span className={`rounded-full ${iconMarginRight} ${iconBgColor} `}>
<img src={buttonIcon} alt="" className="w-full" />
</span>
)}
</button>
);
};
export default ButtonNewDesign;
ButtonNewDesign.defaultProps = {
bgColor: "bg-darkGreenBg",
bgHoverColor: "hover:bg-gray-900",
iconBgColor: "bg-darkGreenBg",
textColor: "text-white",
border: "border-b-4",
borderColor: "border-lightBlueBorderColor",
borderRadius: "rounded",
fontSize: "text-sm",
paddingX: "p-4",
paddingY: "p-4",
// icons
icon: true,
buttonIcon: arrow,
iconMarginRight: "mr-2",
text: "اطلاعات بیشتر",
};