46 lines
1.0 KiB
JavaScript
46 lines
1.0 KiB
JavaScript
import React from "react";
|
|
|
|
// Light background mapping for Bootstrap theme colors
|
|
const lightBackgrounds = {
|
|
primary: "#e3f2fd",
|
|
secondary: "#E9EEF4",
|
|
success: "#e6f4ea",
|
|
danger: "#fdecea",
|
|
warning: "#fff3cd",
|
|
info: "#e0f7fa",
|
|
dark: "#e9ecef",
|
|
};
|
|
|
|
const IconButton = ({
|
|
iconClass, // icon class string like 'bx bx-user'
|
|
color = "primary",
|
|
onClick,
|
|
size = 5,
|
|
radius=null,
|
|
style = {},
|
|
...rest
|
|
}) => {
|
|
const backgroundColor = lightBackgrounds[color] || "#f8f9fa";
|
|
const iconColor = `var(--bs-${color})`;
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={`border-0 ${radius ? `rounded-${rounded}` : 'rounded'} d-flex align-items-center justify-content-center`}
|
|
style={{
|
|
backgroundColor,
|
|
color: iconColor,
|
|
padding: "0.3rem",
|
|
margin:'0rem 0.2rem',
|
|
...style,
|
|
}}
|
|
{...rest}
|
|
>
|
|
<i className={iconClass} style={{ fontSize: size, color: iconColor }}></i>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default IconButton;
|