React-js의 버튼 구성 요소(올인원)

import React from "react";
import "./Button.scss";

const Button = (props) => {
    return (
        <div className={`${props.className}`}>
            <button
                title={props.title}
                type={props.type}
                id={props.id}
                className={`${props.btnClassName}  ${props.icon ? 'iconButton' : false} 
                ${props.size} ${props.variant} ${(props.startIcon || props.endIcon) ? 'iconWithLabel' : false}`}
                name={props.name}
                tabIndex={props.tabIndex}
                onClick={props.onClick}
                disabled={props.disabled}>
                {props.startIcon && <span style={{ marginRight: "0.5rem", display: "flex" }}> {props.startIcon}</span>}
                <span style={{ display: "flex" }}>{props.label ? props.label : props.Icon}</span>
                {props.endIcon && <span style={{ marginLeft: "0.5rem", display: "flex" }}>{props.endIcon}</span>}
            </button>
        </div>
    )
}

export default Button;

button{
        outline: none;
        border-radius: 3px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

    &:focus{
        outline: none;
    }
    &.contained{
        border: 1px solid #100F0F;
        background-color: #100F0F;
        color:#fff;
        &:hover{
            background-color: #2C3333;
            border:1px solid #2C3333;
        }
        &:focus{
            box-shadow: 0 0 0 3px rgba(0,0,0,0.2);
        }
    }
    &.outlined{
        border: 1px solid #100F0F;
        background-color: transparent;
        color:#100F0F;
        &:focus{
            box-shadow: 0 0 0 3px rgba(0,0,0,0.2);
        }
    }
    &.link{
        border:none;
        outline:none;
        background-color: transparent;
        &:focus{
            border: none;
            outline: none;
        }
    }
    &.small{
        min-height: 2rem;
        font-size: 0.8rem;
        min-width: 5rem;
        padding: 0 1.5rem;
    }
    &.medium{
        min-height: 2.4rem;
        font-size: 0.9rem;
        min-width: 7rem;
        padding: 0 1.5rem;
    }
    &.large{
        min-height: 3rem;
        font-size: 1rem;
        min-width: 8rem;
        padding: 0 2rem;

    }
    &.iconButton{
        &.small{
            min-width: 2rem;
            min-height: 2rem;
            padding:0;
        }
        &.medium{
            min-width: 2.5rem;
            min-height: 2.5rem;
            padding:0;
        }
        &.large{
            min-width: 3rem;
            min-height: 3rem;
            padding:0;
        }
    }
}

    <h2 style={{ margin: "10px" }}>Button Size</h2>
            <div style={{ margin: "10px" }}>
                <Button label="Send" variant="contained" size="small" />
            </div>
            <div style={{ margin: "10px" }}>
                <Button label="Send" variant="contained" size="medium" />
            </div>
            <div style={{ margin: "10px" }}>
                <Button label="Send" variant="contained" size="large" />
            </div>
            <h2 style={{ margin: "10px" }}>Button Variant</h2>
            <div style={{ margin: "10px" }}>
                <Button label="Send" variant="contained" size="small" />
            </div>
            <div style={{ margin: "10px" }}>
                <Button label="Send" variant="outlined" size="small" />
            </div>
            <div style={{ margin: "10px" }}>
                <Button label="Send" variant="link" size="small" />
            </div>
            <h2 style={{ margin: "10px" }}>Only Icon Button Size</h2>
            <div style={{ margin: "10px" }}>
                <Button variant="contained" size="small" icon Icon={<SendIcon height="15px" width="15px" />} />
            </div>
            <div style={{ margin: "10px" }}>
                <Button variant="contained" size="medium" icon Icon={<SendIcon height="20px" width="20px" />} />
            </div>

            <div style={{ margin: "10px" }}>
                <Button variant="contained" size="large" icon Icon={<SendIcon height="25px" width="25px" />} />
            </div>
            <h2 style={{ margin: "10px" }}>Only Icon Button Variant</h2>
            <div style={{ margin: "10px" }}>
                <Button variant="contained" size="medium" icon Icon={<SendIcon height="15px" width="15px" />} />
            </div>
            <div style={{ margin: "10px" }}>
                <Button variant="outlined" size="medium" icon Icon={<SendIcon height="20px" width="20px" />} />
            </div>

            <div style={{ margin: "10px" }}>
                <Button variant="link" size="medium" icon Icon={<SendIcon height="25px" width="25px" />} />
            </div>
            <h2 style={{ margin: "10px" }}>Label With EndIcon Button</h2>
            <div style={{ margin: "10px" }}>
                <Button variant="contained" size="small" label="Send" endIcon={<SendIcon height="15px" width="15px" />} />
            </div>
            <div style={{ margin: "10px" }}>
                <Button variant="outlined" size="medium" label="Send" endIcon={<SendIcon height="20px" width="20px" />} />
            </div>

            <div style={{ margin: "10px" }}>
                <Button variant="outlined" size="large" label="Send" endIcon={<SendIcon height="25px" width="25px" />} />
            </div>
            <h2 style={{ margin: "10px" }}>Label With StartIcon Button</h2>
            <div style={{ margin: "10px" }}>
                <Button variant="contained" size="small" label="Send" startIcon={<SendIcon height="15px" width="15px" />} />
            </div>
            <div style={{ margin: "10px" }}>
                <Button variant="outlined" size="medium" label="Send" startIcon={<SendIcon height="20px" width="20px" />} />
            </div>

            <div style={{ margin: "10px" }}>
                <Button variant="outlined" size="large" label="Send" startIcon={<SendIcon height="25px" width="25px" />} />
            </div>