A design system crafted with care to make your designs faster and more efficient.

import React from 'react';

// Button component with dynamic text, custom styles, and click functionality

const ButtonComponent = ({ text = 'Click Me', customStyle = {},

onClick }) => {

const [clicked, setClicked] = useState(false);

// Handle button click

const handleClick = () => {

setClicked(!clicked);

if (onClick) {

onClick();

}

};

return (

className={`custom-button ${clicked ? 'clicked' : ''}`}

style={{ padding: '10px 20px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', ...customStyle }}

onClick={handleClick}

>

{text}

);

};

export default ButtonComponent;