Button component

Button.css

.Button {
    background: #cad2c5;
    display: flex;
    border: 1px solid rgba(0,0,0,0.05);
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: 25%;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.5);
    height: 20%;
    min-width: 25%;
}

.Button[data-size="2"] {
    height: 40%;
}

.Button[data-value="null"] {
    pointer-events: none;
}

.Button:hover {
    background: #d7ddd3;
    cursor: default;
}

Button.js

import React, {Component} from 'react';
import "./Button.css";

class Button extends Component {
    render(){
        return(
            <div 
                className="Button"
                onClick={this.props.onClick}
                data-size={this.props.size}
                data-value={this.props.value}>
                {this.props.label}
            </div>
        );
    }
}

export default Button;