Currently, I have developed a custom Button component in my React application. At the moment, I am able to dynamically modify the color by specifying it within the color attribute. However, I now aim to provide an option to change the size of the button as well (e.g. 'small', 'large'). Since I am still relatively new to CSS, I am unsure about the best approach for achieving this.
This is my Button.css file:
.ButtonUI {
border-radius: 4px;
border: none;
padding: 10px 24px;
margin-right: 20px;
margin-left: 20px;
}
.G-green {
color: white;
background-color: #0F9D58;
}
.small {
border-radius: 4px;
border: none;
padding: 6px 12px;
}
.ButtonUI.G-green:hover{
cursor: pointer;
background-color: #0d8c4f;
}
(Green, Blue, Red, Yellow and Teal classes with respective hover states)
In my Button.js file:
import React from 'react'
import '../../StyleSheets/Button.css'
export default class Button extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return(
<div id="button">
<button className={"ButtonUI " + this.props.color + this.props.size} onClick={this.props.click} id={this.props.name}>{this.props.name}</button>
</div>
)
}
}
I attempted to use the component like this:
<Button color="G-green" size="small" name="Click Me"></Button>If anyone has insights on the most effective approach to tackle this issue, I would sincerely appreciate your assistance. Thank you!