CODEWITHSUNDEEP
javascriptcssreactjs
Michael
Michael

Reputation: 1674

How to dynamically change button size and color in React

I have created a custom Button component in my application using react. As of right now I have it where I can dynamically change the color to what ever I specify within it's color attribute, but now I want to have the option to change the size of the button as well (ie. 'small', 'large'). I'm still a beginner with my CSS so I'm not quite sure how I should do this.

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;
}

.G-blue {
    color: white;
    background-color: #4285F4;
}

.ButtonUI.G-blue:hover{
    cursor: pointer;
    background-color: #336ac4;
}

.G-red {
    color: white;
    background-color: #DB4437;
}

.ButtonUI.G-red:hover{
    cursor: pointer;
    background-color: #b0362c;
}

.G-yellow {
    color: white;
    background-color: #F4B400;
}

.ButtonUI.G-yellow:hover{
    cursor: pointer;
    background-color: #d19b02;
}

.ata-teal{
    color: white;
    background-color: #04837B;
}

.ButtonUI.ata-teal:hover{
    cursor: pointer;
    background-color: #005e58;
}

.ata-orange{
    color: white;
    background-color: #ffa600;
}

.ButtonUI.ata-orange:hover{
    cursor: pointer;
    background-color: #db8f00;
}

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've tried calling the component like this: <Button color="G-green" size="small" name="Click Me"></Button> but this breaks my css and my button shows up blank.

If anyone knows a good way of going about this, I would greatly appreciate it. Thanks!

Upvotes: 3

Views: 6935

Answers (2)

Muhammad Ali
Muhammad Ali

Reputation: 2648

<button className={`ButtonUI ${this.props.color} ${this.props.size}`} onClick={this.props.click} id={this.props.name}>{this.props.name}</button>

Or

<button className={['ButtonUI', this.props.color, this.props.size].join(' ')} onClick={this.props.click} id={this.props.name}>{this.props.name}</button>

Or if you want to install classnames package, which is really good for conditional classes:

import classNames from 'classnames'

<button className={classNames('ButtonUI', this.props.color, this.props.size)} onClick={this.props.click} id={this.props.name}>{this.props.name}</button>

Upvotes: 4

Aravind Reddy
Aravind Reddy

Reputation: 363

Hey i just came up with this, Hope it helps:

constructor(){
         super();
         this.state = {
              black: true
         }
    }
    changeColor(){
        this.setState({black: !this.state.black})
    }
    render(){
        let btn_class = this.state.black ? "blackButton" : "whiteButton";

        return (
             <div>
                 <button className={btn_class}
                         onClick={this.changeColor.bind(this)}>
                           Button
                  </button>
             </div>
        )
    }

Here is the css:

button{
  width: 80px;
  height: 40px;
  margin: 15px;
}
.blackButton{
  background-color: black;
  color: white;
}

.whiteButton{
  background-color: white;
  color: black;
  width: 120px;
  height: 140px;
  margin: 15px;
}

Upvotes: 0

Related Questions