added one more css property radius
This commit is contained in:
parent
77b7faa875
commit
3563c0a857
45
src/components/common/IconButton.jsx
Normal file
45
src/components/common/IconButton.jsx
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
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 = 20,
|
||||||
|
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.4rem",
|
||||||
|
margin:'0rem 0.2rem',
|
||||||
|
...style,
|
||||||
|
}}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
<i className={iconClass} style={{ fontSize: size, color: iconColor }}></i>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default IconButton;
|
Loading…
x
Reference in New Issue
Block a user