Estrutura de botão em react

app.js

import Button from './Button'

<Button>Default</Button>
        
<Button inline>Inline</Button>

<Button inline primary>Primary</Button>

<Button
  inline
  secondary>
    Secondary
</Button>

<Button
  inline
  primary
  type='submit'
  onClick={() => alert('Hello world!')}>
    Hello World!
</Button>

index.js

import React from 'react'

import style from './style.module.css'

export default ({
    inline,
    primary,
    secondary,
    className,
    children,
    ...props
}) => {

    const classes = [ className, style.btn ]

    if(inline) classes.push(style.inline)
    if(primary) classes.push(style.primary)
    if(secondary) classes.push(style.secondary)

    return (
        <button
            className={classes.join(' ')}
            {...props}>
            {children}
        </button>
    )
    
}

style.module.css

.btn {
    display: inline-block;
    width: 100%;
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;

    transition-property: background-color, color;
    transition-duration: .15s;
}

.btn.inline {
    display: inline;
    width: auto;
}

.btn.primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn.primary:hover {
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn.secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn.secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}